coinbus/yq/src/components/dropdownBox.vue

<template>
  <div class="dropdownBox">
    <div
      style="
        height: 100%;
        border-right: 1px solid #ccc;
        display: flex;
        align-items: center;
        padding-right: 10px;
        flex-direction: column;
      "
    >
      <span
        style="
          font-size: 12px;
          color: rgba(0, 0, 0, 0.8);
          margin-bottom: 3px;
          display: inline-block;
          width: 100px;
          padding-left: 10px;
          box-sizing: border-box;
        "
        >Resolution</span
      >
      <el-dropdown @command="handleCommand" style="width: 120px">
        <span
          class="el-dropdown-link"
          style="font-size: 12px; display: inline-block;margin-left: 18px;"
        >
          {{ $t(activeValue) }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
            <!-- :disabled="item.grade >= grade" -->
          <el-dropdown-item
            :disabled="item.disabled"
            
            v-for="item in dataSelection" :key="item.label" :command="item.value" >{{ $t(item.label) }}</el-dropdown-item>
                      
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataSelection: {
      type: Array,
      required: true,
    },
    onSelect: {
      type: Function,
      required: true,
    },
    realTimeData: true,
  },
  data() {
    return {
      activeValue: "home.day1", //1天
      roleKey: "",
      grade: "",
    };
  },
  watch: {
    realTimeData(val) {
      if (!val) {
        this.activeValue = "home.day1";
      }
    },
    roleKey(){
        switch (this.roleKey) {

case "guest"|| undefined:
  this.grade = 1;
  break;
case "registered":
  this.grade = 2;
  break;
case "advance":
  this.grade = 3;
  break;
case "vip":
  this.grade = 4;
  break;
  case "admin":
  this.grade = 10;
  break;
 

default:
  break;
}
this.dataSelection.forEach(item => {


  
  if (item.grade>this.grade) {
      item.disabled =true
  }else{
      item.disabled =false 
  }
});
    }
  },
  mounted() {
    if (localStorage.getItem("identity")) {
      this.roleKey = JSON.parse(localStorage.getItem("identity")).roleKey;
    }
   
    window.addEventListener("setItem", () => {
      if (localStorage.getItem("identity")) {
      this.roleKey = JSON.parse(localStorage.getItem("identity")).roleKey;
    }
    });

    switch (this.roleKey) {

      case "guest"|| undefined:
        this.grade = 1;
        break;
      case "registered":
        this.grade = 2;
        break;
      case "advance":
        this.grade = 3;
        break;
      case "vip":
        this.grade = 4;
        break;
        case "admin":
        this.grade = 10;
        break;
       

      default:
        break;
    }
    this.dataSelection.forEach(item => {
        if (item.grade>this.grade) {
            item.disabled =true
        }else{
            item.disabled =false 
        }
    });
    

  },
  methods: {
    handleCommand(command) {
      this.onSelect(command);
      this.activeValue = this.dataSelection.find(
        (item) => item.value === command ).label;
     
      this.$addStorageEvent(1, "sma", "");
      if (command=="1d") {
        this.$addStorageEvent(1, "timeDisable", false);
      }else{
        this.$addStorageEvent(1, "timeDisable", true);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dropdownBox {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
//   margin-left: -30px;
margin-top: 5px;
  padding: 5px 50px;
}
</style>