element中 el-dropdown 实现切换数据和触发事件处理

element中 el-dropdown 实现切换数据和触发事件处理

我的实现功能是 主题切换时候的 菜单下拉,可以切换value和可以获取到菜单切换时的触发事件
话不多说上代码

结构

// 备注 这里的@command 就是触发事件
    <el-dropdown @command="changeValue" class="ts_class">
      <span class="el-dropdown-link">
        {{ value }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="item in option"
          :key="item.value"
          :command="item.label"
          ><span> {{ item.label }}</span></el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>

js

// data中
      value: "主题",
      option: [
        { label: "紫色", value: 0 },
        { label: "蓝色", value: 1 },
        { label: "深蓝", value: 2 },
     ]
 
   changeValue(text) {
      console.log(text);  // 点击的菜单 lable
      this.value = text;
    },

就是这样,大家可以一起探讨学习