《Vue项目开发实战》第四章：组件封装--ToolBar

系列文章

《Vue项目开发实战》https://blog.csdn.net/sen_shan/category_13075264.html

第二章：API接口与请求封装https://blog.csdn.net/sen_shan/article/details/154638778?spm=1011.2415.3001.5331

文章目录

目录

系列文章

文章目录

前言

ToolBar组件

---

前言

        这篇文章介绍了Vue项目开发中一个封装好的工具栏按钮组组件(ToolBar)，该组件集成了"增删改查"四个高频功能按钮。

        主要特点包括：

                1)支持按钮显隐控制(show*)和禁用状态(disabled*)；

                2)内置国际化Tooltip提示；

                3)统一抛出点击事件；

                4)零配置即可使用，已全局注册；

                5)采用ElementPlus官方图标保持风格统一。

        该组件简化了列表工具栏开发，只需监听四个事件(search/add/edit/delete)即可满足90%的常见需求。

        代码示例展示了组件的模板结构、props定义和事件处理逻辑。

ToolBar组件

src\components\ActionBtnHdrCont.vue  基于原逻辑微调，细节略。

<template><div class="flex items-center gap-0"><el-tooltip :content="$t('btn.search')"  placement="bottom"   effect="light" ><el-button:icon="Search" circle v-if="showSearch"      :disabled="disabledSearch"@click="handleSearch"/></el-tooltip><el-tooltip :content="$t('btn.add')"    placement="bottom"  effect="light"   ><el-buttontype="primary":icon="DocumentAdd"circlev-if="showAdd":disabled="disabledAdd"@click="handleAdd"        /></el-tooltip><el-tooltip :content="$t('btn.edit')"  placement="bottom"  effect="light" ><el-buttonv-if="showEdit"type="primary":icon="Edit"circle:disabled="disabledEdit"@click="handleEdit"/></el-tooltip><el-tooltip :content="$t('btn.delete')"   placement="top"   effect="light" ><el-buttonv-if="showDelete"type="danger":icon="Delete"circle:disabled="disabledDelete"@click="handleDelete"/></el-tooltip></div>
</template><script  lang="ts"  setup>
import { defineProps, defineEmits } from "vue";
import {Plus,Check,Delete,Edit,Message,Search,Star,DocumentAdd,
} from '@element-plus/icons-vue' 
import { ElTooltip } from 'element-plus'; // 导入 ElTooltipconst props = defineProps({// 是否显示搜索按钮showSearch: {type: Boolean,default: false,},// 是否显示新增按钮showAdd: {type: Boolean,default: false,},// 是否显示修改按钮showEdit: {type: Boolean,default: false,},// 是否显示删除按钮showDelete: {type: Boolean,default: false,},// 新增按钮是否禁用disabledAdd: {type: Boolean,default: false,},// 搜索按钮是否禁用disabledSearch: {type: Boolean,default: false,},// 修改按钮是否禁用disabledEdit: {type: Boolean,default: false,},// 删除按钮是否禁用disabledDelete: {type: Boolean,default: true,},
});const emit = defineEmits(["search","add", "edit", "delete"]);const handleSearch = () => {emit("search");
};
const handleAdd = () => {emit("add");
};const handleEdit = () => {emit("edit");
};const handleDelete = () => {emit("delete");
};
</script>

功能说明：工具栏按钮组组件
（ <ToolBar />  已封装为“零配置”即用组件）

1. 职责
提供“增、删、改、查”四个高频按钮的一行式组合，支持：
按需显隐（ show* ）
禁用控制（ disabled* ）
国际化 Tooltip 提示
点击事件统一抛出
2. 接口一览

3. 事件

4. 使用范例

<ToolBarshowSearchshowAddshowEditshowDelete:disabledDelete="selectedRows.length === 0"@search="handleSearch"@add="handleAdd"@edit="handleEdit(selectedRows[0])"@delete="handleDelete(selectedRows)"
/>

5. 特色
零引入成本：已全局注册，直接  <ToolBar />  即可使用
国际化内置：Tooltip 内容自动对应  btn.search / btn.add / btn.edit / btn.delete 
图标常驻：使用  @element-plus/icons-vue  官方图标，风格与 Element Plus 保持一致
轻量：无额外依赖，仅依赖  element-plus  图标与  ElTooltip 

总结：
“把四个按钮拖进来，剩下只要监听四个事件即可完成 90% 的列表工具栏需求。”