代码中按钮的起名方式

在前端代码中，按钮方法名的命名通常遵循以下规则，以保持一致性和可读性：

1. 动词前缀 + 动作描述

使用 click、handle、open、submit 等动词作为前缀，后接具体动作：

 

前缀	适用场景	示例
click	直接执行某个操作（如删除、查询）	clickDelete, clickQuery
handle	处理复杂事件或副作用（如表单提交、错误处理）	handleSubmit, handleError
open	打开对话框、模态框或新页面	openEditDialog, openDetailPage
submit	提交表单或数据	submitForm, submitOrder
toggle	切换状态（如展开 / 收起、显示 / 隐藏）	toggleMenu, toggleAdvancedSearch

 

 

 

 

 

2. 保持语义一致性

• 同一操作统一用词：例如所有 “删除” 按钮的方法名都用 delete，避免 remove、destroy 混用。
• 避免模糊词汇：如 doSomething、process 等，应明确具体动作。

3. 参数传递规范

• 携带数据：若方法需要行数据或 ID，参数名统一为 rowId 或 row：
  ts

  const clickEdit = (rowId: string) => { /* ... */ }
  const openDetail = (row: Record<string, any>) => { /* ... */ }

• 事件对象：若需要原生事件对象，参数名用 event：
  ts

  const handleClick = (event: MouseEvent) => { /* ... */ }

4. 常见命名示例

按钮文本	方法名推荐	说明
搜索	clickSearch 或 handleSearch	触发搜索操作
新增	clickAdd 或 openAddDialog	打开新增表单或直接添加
删除	clickDelete 或 handleDelete	执行删除操作（通常需二次确认）
编辑	openEditDialog 或 clickEdit	打开编辑表单
查看详情	openDetailDialog	打开详情对话框
重置	clickReset 或 resetForm	重置表单或筛选条件
展开 / 收起	toggleExpand 或 toggleCollapse	切换内容显示状态
保存	submitSave 或 handleSave	提交保存操作

 

 

 

 

 

 

 

5. 命名风格选择

• 驼峰命名法（Camel Case）：推荐使用，如 clickSearch、openEditDialog。
• 下划线命名法：较少使用，如 click_search、open_edit_dialog。

6. 避免误区

• ❌ 过度缩写：如 clkDel（应使用 clickDelete）。
• ❌ 与组件名冲突：如 Button、Dialog 等。
• ❌ 无意义命名：如 func1、actionA。

最佳实践示例

vue

<template>
  <el-button @click="clickSearch">搜索</el-button>
  <el-button @click="openEditDialog(row.id)">编辑</el-button>
  <el-button @click="clickDelete(row.id)">删除</el-button>
</template>
<script setup>
const clickSearch = () => {
  // 执行搜索逻辑
}
const openEditDialog = (rowId: string) => {
  // 打开编辑对话框
}
const clickDelete = (rowId: string) => {
  // 执行删除前确认
}
</script>