vue的原生selecet组件

<template>
  <div class="select">
    <div
      class="showValue"
      :style="{height,width ,lineHeight:height }"
      @click.stop="isShow"
    >{{showValue}}</div>
    <div class="options" v-if="show">
      <div v-if="list.length">
        <div
          @click="select(item)"
          :title="item[lable]"
          class="option"
          v-for="item in list"
          :value="item[value]"
          :key="item[value]"
        >{{item[lable]}}</div>
      </div>
      <div class="option" v-if="list.length == 0">暂无数据</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: Array,
    lable: String,
    value: String,
    showValue: String,
    height: String,
    width: String,
    lineHeight: String
  },

  data() {
    return {
      show: false,
      selected: ""
    };
  },
  mounted() {
    window.addEventListener("click", () => {
      this.show = false;
    });
  },

  methods: {
    isShow() {
      this.show = !this.show;
    },

    select(e) {
      this.selected = e;
      this.$emit("selectValue", e);
    }
  },

  computed: {}
};
</script>
<style lang="less" scoped>
.select {
  position: relative;

  .showValue {
    border: 1px solid #eee;
    border-radius: 4px;
  }

  .options {
    position: absolute;
    z-index: 5;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    max-width: 200px;

    .option {
      padding: 8px;
      box-sizing: border-box;
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
    }

    .option:hover {
      background: #eee;
    }
  }
}
</style>