MoreButtons组件（ 用于显示一组按钮，并在按钮数量超出指定显示数量时提供一个下拉菜单展示剩余按钮）

引言：

        在现代的用户界面设计中，特别是在管理和数据展示类应用中，经常会遇到操作按钮过多而导致界面显得拥挤的情况。为了提升用户体验和界面的可操作性，开发了MoreButtons组件。这个组件专为解决操作列按钮过多的问题而设计，它能够有效地管理和展示大量按钮，并在超出指定数量时将多余的按钮收纳进一个更多选项的下拉菜单中。这样一来，不仅能够简化界面布局，还能保持界面的整洁和可读性，使用户能够更轻松地进行操作和导航。

组件配置：

属性名	类型	默认值	描述
reverse	Boolean	false	是否反转更多按钮的图标显示
showNum	Number	0	最多显示的按钮数量
trigger	String	"click"	触发下拉菜单展示的方式，可选值包括 "click" 和 "hover"

插槽：

组件源码：

<script>
export default {
  name: "MoreButtons",
  props: {
    reverse: {
      // 图标是否反转
      type: Boolean,
      default: false,
    },
    showNum: {
      type: Number,
      default: 0,
    },
    trigger: {
      type: String,
      default: "click",
    },
  },
  data() {
    return {};
  },
  methods: {
    renderMoreButton(list = [], appendDom) {
      return (
        <el-dropdown ml-10 trigger={this.trigger}>
          <el-button icon="el-icon-more" type="text"></el-button>
          <el-dropdown-menu slot="dropdown">
            {list
              .filter((item) => item.tag)
              .map((item) => {
                // 转换为文本形式
                item.componentOptions.propsData.type = "text";
                // 移除text为空的按钮
                return (
                  <el-dropdown-item
                    class={[
                      item.componentOptions.children[0] &&
                      item.componentOptions.children[0].text === ""
                        ? "hidden"
                        : "",
                    ]}
                  >
                    {[item]}
                  </el-dropdown-item>
                );
              })}
            {appendDom}
          </el-dropdown-menu>
        </el-dropdown>
      );
    },
  },
  render() {
    const buttonList = this.$slots.default || [];
    const appendDom = this.$slots.append || [];
    const trigger = this.trigger;
    if (buttonList.length === 0 && !appendDom) {
      // 兼容插槽内容
      return <div></div>;
    }
    const baseButtons = buttonList.slice(0, this.showNum);
    const moreButtons = buttonList.slice(this.showNum);
    return (
      <div class={["c-more-button", this.reverse ? "is-reverse" : ""]}>
        {baseButtons}
        {(moreButtons.length > 0 || appendDom) &&
          this.renderMoreButton(moreButtons, appendDom)}
      </div>
    );
  },
};
</script>
<style lang="scss" scoped>
.c-more-button {
  display: inline-block;
  margin-left: 10px;

  &.is-reverse {
    ::v-deep .el-icon-more {
      transform: rotate(90deg);
    }
  }
}

::v-deep .el-dropdown-menu {
  &__item {
    .el-button--text {
      width: 100%;
      font-size: 14px;
    }

    &.hidden {
      display: none;
    }
  }
}
</style>

组件使用示例：

template>
  <MoreButtons :reverse="true" :showNum="3" trigger="hover">
    <el-button>按钮1</el-button>
    <el-button>按钮2</el-button>
    <el-button>按钮3</el-button>
    <el-button>按钮4</el-button>
  </MoreButtons>
</template>

<script>
import MoreButtons from './MoreButtons.vue';

export default {
  components: {
    MoreButtons
  }
}
</script>