前端歌谣-第伍拾陆课-vue2-element组件封装el-button-groups(续)

前言

我是歌谣 今天继续给大家带来el-button-groups(项目的讲解

背景颜色属性color

:style="
        item.color ? { background: item.color, borderColor: item.color } : {}
      "

btns:[{
                //按钮名称
                name:"歌谣",
                //按钮类型
                type:"primary",
                //按钮是否隐藏
                hide:false,
                // icon颜色
                icon:"icon-back",
                //背景颜色
                color:"pink"
            },{
                name:"歌谣1",
                 type:"default",
                 icon:"icon-back"
            },{
                name:"歌谣2",
                type:"primary"
            },{
                name:"歌谣3",
                type:"default",
                 //背景颜色
                color:"pink"
            }],

运行结果

控制按钮是否禁用

:disabled="disabled(item)"

disabled(btn) {
      if (typeof btn.disabled === 'function') {
        return btn.disabled();
      }
      return btn.disabled;
    },

运行结果

点击事件btnClick

@click="btnClick(item, $event)"

btnClick(btn, event) {
      console.log(btn,event,"btn event is ")
      if (typeof btn.click === 'function') {
        btn.click(event, btn);
      }
    }

btns:[{
                //按钮名称
                name:"歌谣",
                //按钮类型
                type:"primary",
                //按钮是否隐藏
                hide:false,
                // icon颜色
                // icon:"icon-back",
                //背景颜色
                color:"pink",
                 disabled:true
            },{
                name:"歌谣1",
                 type:"default",
                 icon:"icon-back"
            },{
                name:"歌谣2",
                type:"primary",
                disabled:true
            },{
                name:"歌谣3",
                type:"default",
                 //背景颜色
                color:"pink",
                 click: this.handleCreate
            }],

运行结果

下拉菜单max属性

btns:[{
                //按钮名称
                name:"歌谣",
                //按钮类型
                type:"primary",
                //按钮是否隐藏
                hide:false,
                // icon颜色
                // icon:"icon-back",
                //背景颜色
                color:"pink",
                 disabled:true
            },{
                name:"歌谣1",
                 type:"default",
                 icon:"icon-back"
            },{
                name:"歌谣2",
                type:"primary",
                disabled:true
            },{
                name:"歌谣3",
                type:"default",
                 //背景颜色
                color:"pink",
                 click: this.handleCreate
            },{
                name:"歌谣3",
                type:"default",
                 //背景颜色
                color:"pink",
                 click: this.handleCreate
            },{
                name:"歌谣3",
                type:"default",
                 //背景颜色
                color:"pink",
                 click: this.handleCreate
            }],
            max:3

<el-dropdown v-if="dropDownBtns.length" class="dropdown">
      <el-button size="mini" type="primary">
        更多
        <i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="(item, index) in dropDownBtns"
          @click.native="btnClick(item, $event)"
          :disabled="disabled(item)"
          :key="index"
          :icon="item.icon"
          >{{ item.name }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>

dropDownBtns() {
      const list = this.btns.filter(
        (item) =>
          !(item.permissions && this.permissions[item.permissions] !== true)
      );

      const end = list.length - this.max;
      if (end <= 0) {
        return [];
      }

      return list.slice(0, end + 1);
    }

运行结果