移动端下拉框

<template>
  <div class="selectBox">
    <label style="position: relative" for="selectInput" class="selectLabel">
      <input
        type="text"
        readonly
        v-model="selectName"
        class="selectInput"
        id="selectInput"
        :placeholder="selectData.text"
        @click.stop="ev_changeFlag"
      />
      <!-- 右边icon -->
      <div :class="['downIcon', listFlag ? 'trans' : '']"></div>
    </label>
    <!-- 下拉列表 -->
    <transition name="listFade">
      <ul class="selectList" v-show="listFlag">
        <li
          v-for="(item, idx) in selectData.data"
          :key="idx"
          :value="item.value"
          :class="[selectName == item.name ? 'selectLi' : '']"
          @click.stop.prevent="ev_choseLi(item.value, item.name)"
        >
          {{ item.name }}
        </li>
      </ul>
    </transition>
  </div>
</template>

<script>
// 下拉框
export default {
  props: {
    selectData: {
      type: Object,
      default: function () {
        return {
          id: "s0",
          name: "subType",
          text: "选择子类型",
          selectVal: "",
          selectName: "",
          data: [
            {
              value: "a",
              name: "a",
            },
            {
              value: "b",
              name: "b",
            },
          ],
        };
      },
    },
  },
  data() {
    return {
      // 选中的value
      selectVal: "",
      // 选中的文字
      selectName: "",
      // 是否显示下拉列表
      listFlag: false,
    };
  },
  created() {
    this.selectVal = this.selectData.selectVal?this.selectData.selectVal:'';
    this.selectName = this.selectData.selectName?this.selectData.selectName:'';
  },
  mounted() {
    // 点击外部时关闭下拉列表
    window.addEventListener("click", this.ev_closeList);
  },
  beforeDestroy(){
    window.removeEventListener("click", this.ev_closeList);
  },
  methods: {
    // 关闭下拉列表
    ev_closeList() {
      this.listFlag = false;
    },
    ev_openList(){
      this.listFlag=true
    },
    // 输入框点击
    ev_changeFlag() {
      if(!this.selectData.data.length){
        return
      }
      this.listFlag = !this.listFlag;
      this.$emit('evClick')
    },
    // 下拉列表项点击
    ev_choseLi(val="", name="") {
      this.selectVal = val;
      this.selectName = name;
      this.$emit("select", this.selectVal);
      this.ev_closeList();
    },
    // 重置
    ev_reset() {
      if (this.selectData.selectVal) {
        this.ev_choseLi(this.selectData.selectVal, this.selectData.selectName);
      } else {
        this.ev_choseLi()
      }
    },
  },
};
</script>

<style lang="less" scoped>
.listFade-enter-active,
.listFade-leave-active {
  transition: opacity 0.2s;
}
.listFade-enter, .listFade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
.downIcon {
  width: 0.32rem;
  height: 0.1866666667rem;
  height: 0.2133333333rem;
  background: url("@/assets/selectDown.svg") no-repeat;
  background-size: cover;
  // position: absolute;
  // right: 0.2666666667rem;
  // top: 50%;
  // transform: translateY(-50%);
  transition: all 0.3s;
}
.trans {
  transform: translateY(-50%) rotate(180deg);
  transform: rotate(180deg);
}
.selectBox {
  position: relative;
  margin: 0 auto;
  width: 9.2rem;
  .selectLabel {
    display: flex;
    align-items: center;
    border: 1px solid #d7d7d7;
    border-radius: 0.1066666667rem;
    padding: 0 0.2666666667rem;
  }
  .selectInput {
    width: calc(100% - 0.5866666667rem);
    height: 0.96rem;
    font-size: 0.3733333333rem;
    color: #0099ff;
    // border: 1px solid #d7d7d7;
    padding-right: 0.2666666667rem;
    border: none;
    // border-radius: 0.1066666667rem;
  }
  .selectList {
    z-index: 1000;
    width: calc(100% - 0.5333333333rem);
    max-height: 5.6rem;
    overflow-y: scroll;
    background: #fff;
    border: 1px solid #e6e8ed;
    border-radius: 0.1066666667rem;
    box-shadow: 0px 0px 0.1066666667rem 0px rgba(0, 0, 0, 0.1);
    font-size: 0.3733333333rem;
    line-height: 0.5333333333rem;
    padding: 0 0.2666666667rem 0.1333333333rem;
    color: #666666;
    position: absolute;
    bottom: -0.2666666667rem;
    transform: translateY(100%);
    li {
      margin-bottom: 0.1333333333rem;
      margin-top: 0.2666666667rem;
    }
    .selectLi {
      color: #0099ff;
    }
  }
}
</style>