element可搜索下拉框选中选项，切屏后，会自动获取焦点，然后菜单自动弹出了

Question

<template> 
      <el-select
      v-model="value" 
      filterable 
      placeholder="请选择"> 
        <el-option 
          v-for="item in options" 
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option> 
      </el-select>
 </template>
<script>
export default { 
data() { 
return { 
    options: [
            { value: '选项1', label: '黄金糕' },
            { value: '选项2', label: '双皮奶' }, 
            { value: '选项3', label: '蚵仔煎' }, 
            { value: '选项4', label: '龙须面' },
            { value: '选项5', label: '北京烤鸭' }
            ],
    value: '' 
       } 
   }
} 
</script>

Answer 1

你可以试试当你选中选项后将选择框blur（失去焦点），调用组件的blur()方法，如下

<el-select
      ref="select1" // 使用ref
      @change="changeSelect"
      v-model="value" 
      filterable 
      placeholder="请选择"> 
        <el-option 
          v-for="item in options" 
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option> 
      </el-select>

在change的使用调用methods---> changeSelect

changeSelect() {
    this.$refs.select1.blur()
}

Answer 2

已经解决该问题,去除filterable属性即可

Answer 3

添加自定义指令 v-select-blur

Vue.directive('select-blur', {
  bind(el, binding) {
    let inputDom = el.getElementsByTagName('input')[0]
    if (!inputDom) return 
    let isOpen = false
    inputDom.addEventListener('focus', function (event) {
      if (isOpen) {
        inputDom.blur()
      } else {
        isOpen = true
      }
    })
  }
})

用法：

<el-select
    v-model="data.countryName"
    :placeholder="$t('public.pleaseSelect')"
    clearable
    size="small"
    filterable
    @change="changeCountry"
    @clear="clearCountry"
    v-select-blur
>
 <el-option
     v-for="item in countryList"
     :key="item.id"
     :label="item.name"
     :value="item.name"
     :title="item.name"
 /></el-select>