引言

在现代Web应用开发中，按钮组的使用无处不在，从表单提交到列表操作，它们是用户与界面交互的重要媒介。然而，随着按钮数量的增加，界面往往变得混乱不堪，用户体验也随之下降。为了解决这一问题，我们可以借助Vue2和ElementUI的强大功能，封装一个灵活的动态按钮组组件。

需求分析

1. 基本功能需求

动态按钮组需要能够接收一组按钮配置，并根据这些配置渲染按钮。此外，还需要提供属性来控制最多显示的按钮数量，以及自定义按钮内容和点击事件。

2. 组件功能扩展

除了基本功能外，动态按钮组还应支持ElementUI的el-button的所有属性，以便开发者可以自定义按钮的样式、类型和大小。同时，下拉菜单功能也应支持自定义样式和行为。

实现细节

定义 Props

props: {
  buttonList: {
    type: Array,
    required: true
  },
  maxVisibleButtons: {
    type: Number,
    default: 3
  },
  dropdownProps: {
    type: Object,
    default: () => ({})
  }
}

计算属性

computed: {
  visibleButtons() {
    return this.buttonList.slice(0, this.maxVisibleButtons);
  },
  hiddenButtons() {
    return this.buttonList.slice(this.maxVisibleButtons);
  },
  hasHiddenButtons() {
    return this.hiddenButtons.length > 0;
  }
}

方法

methods: {
  handleClick(button) {
    this.$emit("click", button);
  }
}

编写 Template

<div>
  <!-- 默认显示的按钮 -->
  <el-button v-for="btn in visibleButtons" :key="btn.key" v-bind="btn.props" @click="handleClick(btn)">
    <slot :name="btn.key" scope="btn">{{ btn.label }}</slot>
  </el-button>

  <!-- 超出部分的下拉按钮 -->
  <el-dropdown class="more-dropdown" v-if="hasHiddenButtons" v-bind="dropdownProps" @command="handleClick">
    <slot name="dropdown">
      <el-button type="primary">更多</el-button>
    </slot>
    <el-dropdown-menu>
      <el-dropdown-item v-for="btn in hiddenButtons" :key="btn.key" v-bind="btn.props" :command="btn">
        <slot :name="btn.key" scope="btn">{{ btn.label }}</slot>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</div>

样式

<style scoped>
.more-dropdown {
  margin-left: 10px;
}
</style>

组件源码

export default {
  name: "DynamicButtonGroup",
  props: {
    buttonList: {
      type: Array,
      required: true
    },
    maxVisibleButtons: {
      type: Number,
      default: 3
    },
    dropdownProps: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    visibleButtons() {
      return this.buttonList.slice(0, this.maxVisibleButtons);
    },
    hiddenButtons() {
      return this.buttonList.slice(this.maxVisibleButtons);
    },
    hasHiddenButtons() {
      return this.hiddenButtons.length > 0;
    }
  },
  methods: {
    handleClick(button) {
      this.$emit("click", button);
    }
  }
}

FAQ

对于按钮权限处理，可以在buttonList的每个按钮中定义一个permission属性。在使用动态按钮组的页面中，通过一个计算属性调用权限判断方法，使用filter方法过滤出具有权限的按钮组。

结语

通过封装Vue2和ElementUI的动态按钮组组件，我们不仅提高了代码的可维护性和复用性，还为用户带来了更加流畅和直观的操作体验。希望这篇文章能为你在项目开发中遇到按钮组管理的问题提供一些帮助。