xialakuang.vue代码

<template>
      <div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
            <span>{{dplLable}}<i>▼</i></span>
            <ul v-dpl class="myul">
                  <li v-for="(item, index) in dataList" :key="index" @click="onLiClick(index, $event)">
                        {{item.name}}</li>
            </ul>
      </div>
</template>

<script>
      export default {

            data() {
                  return {
                        dplLable: '工号',
                        activeIndex: 0,
                        dataList: [{
                                    name: "姓名"
                              },
                              {
                                    name: "工号"
                              },
                              {
                                    name: "电话"
                              }
                        ]

                  }
            },
            directives: {
                  dpl: {
                        bind(el) {
                              el.style.display = "none";
                        }
                  }
            },
            methods: {
                  onDplOver(event) {
                        let ul = event.currentTarget.childNodes[1];
                        ul.style.display = "block";
                  },
                  onDplOut(event) {
                        let ul = event.currentTarget.childNodes[1];
                        ul.style.display = "none";
                  },
                  onLiClick(index) {
                        let that = this
                        let path = event.path || (event.composedPath && event.composedPath()) //兼容火狐和safari
                        path[1].style.display = "none";
                        this.activeIndex = index;
                        this.$emit("change", {
                              index: index,
                              value: that.dataList[index].name
                        })
                        console.log(that.dataList[index])

                        that.dplLable = that.dataList[index].name
                  }
            },
            computed: {
                  // dplLable() {
                  //       return this.dataList[this.activeIndex][this.labelProperty]
                  // }
            }
      }
</script>


<style scoped>
      .zq-drop-list {
            display: inline-block;
            min-width: 100px;
            position: relative;
            width: 26vw;
            height: 50px;
            background-color: gray;
            left: 10px;
            top: 12px;
            line-height: 50px;
            text-align: center;
      }

      .zq-drop-list span {
            display: block;
            height: 50px;
            width: 100%;
            line-height: 50px;
            text-align: center;
            background: #f1f1f1;
            font-size: 14px;
            color: #333333;
            border-radius: 4px;
      }

      .zq-drop-list span i {
            background: url(https://www.easyicon.net/api/resizeApi.php?id=1189852&size=16) no-repeat center center;
            margin-left: 16px;
            display: inline-block;
      }

      .zq-drop-list ul {
            position: absolute;
            top: 63px;
            left: 0;
            width: 100%;
            margin: 0;
            padding: 0;
            border: solid 3px #f1f1f1;
            border-radius: 4px;
            overflow: hidden;
            background-color: #e9e7ef;
      }

      .zq-drop-list ul li {
            color: gray;
            list-style: none;
            height: 80px;
            line-height: 80px;
            font-size: 16px;
            border-bottom: solid 1px #f1f1f1;
            background: #ffffff;
      }

      .zq-drop-list ul li:last-child {
            border-bottom: none;
      }

      .zq-drop-list ul li:hover {
            background: #f6f6f6;
      }
</style>