Vue2若依系统中封装可输入可下拉的字典输入选择框

引用

<InputDictSelect :linkName="form.buttonUrl" :option="dict.type.fast_track_link" 
:direction="false" placeholder="请输入完整的快捷按钮地址或者根据输入值选择完整的快捷
按钮地址" @handleCustomEvent="selectLink" />

dicts: ['fast_track_link'],

selectLink(val){
  this.form.buttonUrl=val
},

封装的组件

<template>
  <div class="selectDivFa">
    <el-input v-model="input" :placeholder="placeholder" @focus="focusEvent" @change="changeEvent" @input="inputEvent" clearable></el-input>
      <ul class="selectDiv" :class="direction===true?'selectDivDown':'selectDivUp'" v-show="open" style="width: 100%">
      <li class="selectDivItem" :class="dict.label===input ? 'selectDivItemChecked' : ''" v-for="dict in NewOption" :key="dict.value" @dblclick="dblEvent(dict)">{{dict.label}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Hamburger',
  props: {
    //提示文字
    placeholder: {
      type: String,
      default: ''
    },
    // 回显数据
    linkName: {
      type: String,
      default: ''
    },
    // 弹窗方向
    direction: {
      type: Boolean,
      default: false
    },
    // 字典数组
    option:{
      type: Array,
      default: []
    },
  },
  data() {
    return {
      input: this.linkName,
      NewOption:this.option,
      open:false,
    }
  },
  methods: {
    /**
     * 聚焦展示
     */
    focusEvent() {
      this.open=true
    },
    /**
     * 改变事件
     */
    changeEvent() {
      this.$emit('handleCustomEvent',this.input)
      this.open=false
    },
    /**
    * 双击选择选项
     */
    dblEvent(val) {
      this.input=val.value
      this.$emit('handleCustomEvent',this.input)
      this.open=false
    },
    /**
    * 输入筛选事件
     */
    inputEvent(val) {
      if(val){
        this.NewOption = this.option.filter(option => option.value.includes(val));
      }else{
        this.NewOption = this.option
      }
    }
  }
}
</script>

<style scoped>
.selectDivFa{
  position: relative;
}
.selectDiv{
  position: absolute;
  border:1px solid #c0c0c0;
  background: #ffffff;
  border-radius: 3px;
  margin-top: 12px;
  list-style-type: none;
  padding: 0;
  height: 0;
  overflow: auto;
  animation: growHeight 0.5s forwards;
  z-index: 999999;
}
@keyframes growHeight {
  from {
    height: 0;
  }
  to {
    height: 104px;
  }
}
.selectDivItem{
  line-height: 34px;
  font-weight: bold;
  padding: 0 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.selectDivItem:hover{
  background: #F5F7FA;
}
.selectDivItemChecked{
  color: #1890ff;
}
.selectDivDown{
  top: 40px;

}
.selectDivUp{
  bottom: 40px;
}
</style>