vue实现下拉框

Posted 2020-12-23 mzj143

<template>
    <div>
        <li>
  <div class="por">
    <div class="selectBox" style="width: 400px;">
      <div class="selectBox_show" v-on:click.stop="arrowDown">
        <i class="icon icon_arrowDown"></i>
        <p title="请选择">{{unitName}}</p>
        <input type="hidden" name="unit" v-model="unitModel">
      </div>
      <div class="selectBox_list" v-show="isShowSelect"
           style="max-height: 240px; width: 398px; display: block;">
        <div class="selectBox_listLi" v-for="(item, index) in dataList"
             @click.stop="select(item, index)">{{item.value}}
        </div>
      </div>
    </div>
  </div>
</li>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        isShowSelect: false,
        dataList: [
          {key: -1, value: "请选择"},
          {key: 0, value: "苹果"},
          {key: 1, value: "香蕉"},
          {key: 2, value: "荔枝"},
          {key: 3, value: "火龙果"},
          {key: 4, value: "橘子"},
          {key: 5, value: "黄瓜"}
        ],
        unitName:‘请选择‘
      }
    },
    methods: {
      arrowDown() {
        this.isShowSelect = !this.isShowSelect;
      },
      select(item, index) {
        this.isShowSelect = false;
        console.log(item);
        console.log(index);
        this.unitModel = index;
        this.unitName = item.value;
      }
    }
  };
</script>


<style scoped>

</style>