vue中简单的中英文切换组件

<template>
  <div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
    <span><i class="iconfont icon-yuyanqiehuan"></i></span>
    <ul v-dpl ref="ul_cont">
      <li v-for="(item, index) in dataList" :key="index" @click="onLiClick(index, $event)">{{ item[labelProperty] }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "DropDownList",
  data() {
    return {
      activeIndex: 0,
    };
  },
  props: {
    dataList: {
      type: Array,
      default() {
        return [
          {
            name: "zh",
            text: "中文",
          },
          {
            name: "en",
            text: "English",
          },
        ];
      },
    },
    labelProperty: {
      type: String,
      default() {
        return "text";
      },
    },
  },
  directives: {
    // 自定义组件，先让内容隐藏
    dpl: {
      bind(el) {
        el.style.display = "none";
      },
    },
  },
  methods: {
    onDplOver(event) {
      // let ul = event.currentTarget.childNodes[1];

      this.$refs.ul_cont.style.display = "block";
    },
    onDplOut(event) {
      // let ul = event.currentTarget.childNodes[1];
      this.$refs.ul_cont.style.display = "none";
    },
    onLiClick(index) {
      console.log(event);
      let path = event.path || (event.composedPath && event.composedPath()); //兼容火狐和safari
      path[1].style.display = "none";
      this.activeIndex = index;
      this.app.$emit("changed", {
        // index: index,
        // value: this.dataList[index].name,
        name: this.dplLable,
      });
    },
  },
  computed: {
    dplLable() {
      return this.dataList[this.activeIndex];
    },
  },
  mounted() {},
};
</script>

<style lang="scss">
.zq-drop-list {
  display: inline-block;
  // min-width: 100px;
  position: relative;
  span {
    display: block;
    font-size: 14px;
    text-align: center;
    // color: #333333;
    border-radius: 4px;
    color: #fff;
    margin-right: 10px;
    i {
      // background: url(https://www.easyicon.net/api/resizeApi.php?id=1189852&size=16) no-repeat center center;
      margin-left: 6px;
      display: inline-block;
    }
  }
  ul {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
    margin: 0;
    padding: 0;
    border: solid 1px #f1f1f1;
    border-radius: 4px;
    overflow: hidden;
    li {
      list-style: none;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      border-bottom: solid 1px #f1f1f1;
      background: #ffffff;
      color: #000;
      padding-left: 10px;
    }
    li:last-child {
      border-bottom: none;
    }
    li:hover {
      background: #f6f6f6;
    }
  }
}
</style>