CABaggageData2.0/src/components/TimeZoneSelector/index.vue

<!--
 * @Author: Badguy
 * @Date: 2022-05-17 15:56:46
 * @LastEditTime: 2022-05-27 17:02:16
 * @LastEditors: your name
 * @Description: 时区下拉选择菜单
 * have a nice day!
-->
<template>
  <el-dropdown
    :hide-on-click="false"
    @command="commandHandler"
  >
    <img
      class="btn-img btn-shadow"
      src="../../assets/baggage/ic_time.png"
    >
    <!-- <span class="time-zone-text">{{ currentDropdownItem.text }}</span> -->
    <el-dropdown-menu
      slot="dropdown"
      class="time-zone"
    >
      <el-dropdown-item
        v-for="(item, index) in DropdownItems"
        :key="index"
        :class="{ 'time-zone-selected': timeZone === item.command }"
        :command="item.command"
        :disabled="item.disabled"
      >{{ item.text }}</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'TimeZoneSelector',
  data() {
    return {
      DropdownItems: [
        {
          text: '国内Local/国际UTC',
          disabled: true
        },
        {
          text: 'Local',
          command: 8
        },
        {
          text: 'UTC',
          command: 0
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['timeZone']),
    currentDropdownItem() {
      return this.DropdownItems.find(item => item.command === this.timeZone)
    }
  },
  methods: {
    commandHandler(command) {
      this.$store.dispatch('timeZone/setTimeZone', command)
    }
  }
}
</script>

<style lang="scss" scoped>
.time-zone {
  .el-dropdown-menu__item {
    padding-left: 30px;
    font-family: Helvetica, 'Microsoft YaHei';
    font-size: 12px;
    color: #101116;
    position: relative;
    &.is-disabled {
      color: #909399;
    }
    &.time-zone-selected::before {
      content: '√';
      position: absolute;
      left: 10px;
    }
  }
}
</style>