自己写select+input功能，带输入带选择

点击除了下拉框里面其他地方，隐藏下拉框指令

const clickoutside = {
  // 初始化指令
  bind (el, binding, vnode) {
    function documentHandler (e) {
        // 这里判断点击的元素是否是本身，是本身，则返回
        if (el.contains(e.target)) {
            return false
        }
        // 判断指令中是否绑定了函数
        if (binding.expression) {
            // 如果绑定了函数 则调用那个函数，此处binding.value就是selectClose方法
            binding.value(e)
        }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler
    document.addEventListener('click', documentHandler)
  },
  update () { },
  unbind (el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
}

注册指令

directives: { clickoutside },

方法

selectClose () { // 点击除了页面其他地方关闭选择
        this.showDirect = false;
        this.addButtonStyle;
      },
selectDirect(item){
        this.showDirect=false;
        const obj = {
          directCode:item.value,
          directName:item.text
        }
        this.form.setFieldsValue(pick(obj,'directCode','directName'))
      },

使用 v-clickoutside="selectClose"

 <a-form-item label="方向编码" :labelCol="labelCol" :wrapperCol="wrapperCol" class="clover_select_wrap" v-clickoutside="selectClose">
          <a-input v-decorator="['directCode',validatorRules.directCode]" placeholder="请输入方向编码" @focus="showDirect=true"></a-input>
          <ul v-show="showDirect" class="ant-select-dropdown-menu wrap">
            <li v-for="direct in directCodeList" :key="direct.value" class="ant-select-dropdown-menu-item" @click="selectDirect(direct)">{{direct.value}}-{{direct.text}}</li>
          </ul>
        </a-form-item>