代码推送

yq/src/components/dropdownBox.vue

@@ -0,0 +1,179 @@
+<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>