万能按钮组件：封装通用页面工具栏，让开发更轻松！

前端

2023-11-25 20:26:09

导语

在后台管理系统中，顶部工具栏可谓是使用频率最高的元素之一。因此，为了提高开发效率，本文将基于 Element-UI，封装一个可复用且支持插槽的按钮工具栏组件。

第一步：业务逻辑

通常情况下，顶部按钮工具栏与下方的表格组件协同使用。因此，在设计这个组件时，需要考虑与表格组件的配合。

第二步：功能需求

根据业务逻辑，按钮工具栏需要具备以下功能：

支持添加自定义按钮
按钮可包含图标、文字或两者兼有
支持按钮分组
提供插槽，允许用户插入自定义内容

第三步：技术选型

基于上述需求，我们选择了 Element-UI 作为技术框架。Element-UI 提供了丰富的组件库，可以满足我们对按钮、图标和布局的需要。

第四步：组件封装

接下来，我们开始封装组件。首先，定义组件的模板结构：

<template>
  <el-row>
    <el-col :span="24">
      <el-button-group>
        <el-button v-for="item in buttons" :key="item.id" :icon="item.icon" @click="item.action">{{ item.text }}</el-button>
      </el-button-group>
    </el-col>
  </el-row>
</template>

在模板中，我们使用了 Element-UI 的 el-row 和 el-col 组件来布局工具栏，el-button-group 组件来管理按钮，并通过 v-for 循环动态渲染按钮。

接着，定义组件的脚本：

<script>
export default {
  props: {
    buttons: {
      type: Array,
      default: () => []
    }
  }
}
</script>

在脚本中，我们定义了 buttons 属性，它是一个数组，用于接收按钮配置。

最后，定义组件的样式：

<style>
.el-button-group {
  margin-bottom: 10px;
}
</style>

在样式中，我们为按钮组添加了一些额外的样式。

第五步：使用组件

现在，我们已经封装好了通用按钮工具栏组件，接下来就可以在需要的地方使用它了：

<template>
  <div>
    <universal-button-toolbar :buttons="buttons"></universal-button-toolbar>
    <!-- 下方表格组件 -->
  </div>
</template>

<script>
import UniversalButtonToolbar from '@/components/UniversalButtonToolbar.vue'

export default {
  components: {
    UniversalButtonToolbar
  },
  data() {
    return {
      buttons: [
        { id: 1, icon: 'el-icon-plus', text: '添加', action: this.add },
        { id: 2, icon: 'el-icon-edit', text: '编辑', action: this.edit },
        { id: 3, icon: 'el-icon-delete', text: '删除', action: this.delete }
      ]
    }
  },
  methods: {
    add() {
      // 添加操作
    },
    edit() {
      // 编辑操作
    },
    delete() {
      // 删除操作
    }
  }
}
</script>