vue实现可输入可下拉选择的组件

效果图：

组件：

// <Input>组件是基于iview框架的，换成你的UI框架对应的input组件再改造一下即可
<template>
  <div style="position: relative" class="custom-select-dropdown">
    <Input
      v-model="keyWord" clearable
      :placeholder="placeholder" @on-focus="focusNotarialCode"
      @on-change="changeValue"
    />
    <div
      v-show="isShowDrownItem && optionList && optionList.length>0" class="ivu-select-dropdown"
      style="width: 100%"
    >
      <ul class="ivu-select-dropdown-list">
        <li
          v-for="(item, idx) in optionList" :key="item.value + idx"
          class="ivu-select-item" @click="selectedItem(item)"
        >{{ item.nameZh}}</li>
      </ul>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'CustomSelect',
  props: {
    selected: {
      type: [String, Number]
    },
    placeholder: {
      type: String,
      default: ''
    },
    keyName: {
      type: String
    },
    optionList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      isShowDrownItem: false,
      keyWord: ''
    }
  },
  watch: {
    optionList(newVal) {
      console.log('optionList', newVal)
    },
    selected: {
      immediate: true,
      handler(newVal) {
        console.log('selected', newVal)
        this.keyWord = newVal
      }
    }
  },
  mounted() {
  },
  beforeDestroy() {
    document.removeEventListener('click', this.hidePopClick)
  },
  methods: {
    hidePopClick(e) {
      const path = e.path || (e.composedPath && e.composedPath())
      const flag = path.some(dom => dom.className && dom.className.indexOf('custom-select-dropdown') !== -1)
      if (!flag) {
        this.isShowDrownItem = false
      }
    },
    focusNotarialCode() {
      this.isShowDrownItem = true
      document.addEventListener('click', this.hidePopClick)
    },
    selectedItem(item) {
      console.log('选中', item)
      this.keyWord = this.keyName ? item[this.keyName] : item.value
      this.$emit('selectedItem', this.keyWord)
      this.isShowDrownItem = false
    },
    changeValue() {
      console.log('变更的值', this.keyWord)
      this.$emit('selectedItem', this.keyWord)
    }
  }
}
</script>
 
<style scoped>
 
</style>
 复制

组件使用：

            <custom-select
              key="notarialOffice"
              :selected="formValidate.fileSubTypeName"
              placeholder="请输入材料名称"
              :option-list="notarialOfficeList"
              key-name="nameZh"
              @selectedItem="getSelectedItem($event,'fileSubTypeName')"
            />复制

 
const notarialOfficeList = [
    {
        "id": 1337,
        "nameZh": "张三",
        "nameEn": "zhangsan",
        "value": "CP",
    },
    {
        "id": 1338,
        "nameZh": "李四",
        "nameEn": "lisi",
        "value": "CD",
    }
]
 
 
    getSelectedItem(val, key) {
      this.formValidate[key] = val || ''
    }复制