直播平台制作，vue el-dropdown下拉框单选有对钩高亮

直播平台制作，vue el-dropdown下拉框单选有对钩高亮

 

<template>
  <div>
    <div class="selected"></div>
    <el-dropdown
      style="
        cursor: pointer;
        font-weight: 500;
        font-size: 16px;
        line-height: 1;
        letter-spacing: 0.09px;
        color: #202224;
      "
      :hide-on-click="false"
      @command="switchStatusKeywords"
    >
      <span class="el-dropdown-link"
        >扫描进度<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="(item, key) in taskStatusMap"
          :key="key"
          :command="item.value"
          :class="{ selected: status == item.value }"
        >
          <i v-show="status == item.value" class="el-icon-check"></i>
          {{ item.title }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  data() {
    return {
      status: "",
      taskStatusMap: [
        { value: "0", type: "default", title: "未开始" },
        { value: "1", type: "default", title: "队列中" },
        { value: "2", type: "default", title: "进行中" },
        { value: "3", type: "default", title: "已成功" },
        { value: "4", type: "disabled", title: "不可用" },
        { value: "5", type: "disabled", title: "部分信息丢失" },
        { value: "6", type: "default", title: "暂停" },
      ],
    };
  },
  methods: {
    switchStatusKeywords(index) {
      console.log("index", index);
      this.status = index;
    },
  },
};
</script>
<style scoped >
.selected {
  color: #409eff;
}
.el-dropdown-menu__item {
  padding-left: 40px;
}
.el-dropdown-menu__item i {
  margin-left: -24px;
  color: #409eff;
}
</style>

​

以上就是 直播平台制作，vue el-dropdown下拉框单选有对钩高亮，更多内容欢迎关注之后的文章