element ui的select下拉组件在IOS唤不起软键盘解决方法

vue版本2.6.14

安装element ui

npm i element-ui -S

main.js

添加代码如下：

import Vue from "vue";


import ElementUI from 'element-ui';
//样式文件需要单独引入
import 'element-ui/lib/theme-chalk/index.css';


import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

代码

<template>
  <div class="about">
    <h1>This is an about page</h1>
	<div>
		<el-select 
			ref="select"
			@focus="clear"
			@hook:mounted="clear"
			@visible-change="clear"
			
			filterable
			remote
			clearable
			reserve-keyword
			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>
	</div>
  </div>
</template>

<script>
import { ref } from 'vue'
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    },
	methods:{
		clear(async) {
		  this.$nextTick(() => {
				if (!async) {
					// ios 手机有延迟问题
					setTimeout(() => {
					  const { select } = this.$refs
					  const input = select.$el.querySelector('.el-input__inner')
					  input.removeAttribute('readonly')
					}, 200)
				}
			})
		},
	}
  }
</script>

ref="select"
@focus="clear"
@hook:mounted="clear"
@visible-change="clear"

方法代码：

clear(async) {
		 this.$nextTick(() => {
				if (!async) {
					// ios 手机有延迟问题
					setTimeout(() => {
					  const { select } = this.$refs
					  const input = select.$el.querySelector('.el-input__inner')
					  input.removeAttribute('readonly')
					}, 200)
				}
		})
},