Vue.js实现自定义下拉框菜单的两种方案

基础方案：单组件内部实现

<script type="text/ecmascript-6">
 export default {
 data() {
  return {
  isShowSelect: false,
  dataList: [
   {key: -1, value: "请选择"},
   {key: 0, value: "苹果"},
   {key: 1, 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>

<li>
 <h3 class="F7">下拉框选择案例</h3>
 <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>

进阶方案：父子组件数据交互

<template>
 <div class="selection-component">
  <div class="selection-show" @click="toggleDrop">
  <span>{{ selections[nowIndex].label }}</span>
  <div class="arrow"></div>
  </div>
  <div class="selection-list" v-if="isDrop">
  <ul>
   <li v-for="(item, index) in selections" @click="chooseSelection(index)">{{ item.label }}</li>
  </ul>
  </div>
 </div>
</template>

<script>
export default {
 props: {
 selections: {
  type: Array,
  default: [{
  label: 'test',
  value: 0
  }]
 }
 },
 data () {
 return {
  isDrop: false,
  nowIndex: 0
 }
 },
 methods: {
 toggleDrop () {
  this.isDrop = !this.isDrop
 },
 chooseSelection (index) {
  this.nowIndex = index
  this.isDrop = false
  this.$emit('on-change', this.selections[this.nowIndex])
 }
 }
}
</script>