el-select 可搜索下拉框，选中选项后，希望立即失去焦点，收起键盘，执行其他逻辑

原创已于 2025-03-24 10:52:33 修改 · 357 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2025-03-23 11:58:40 首次发布

上一篇：el-select 可搜索下拉框在ios、ipad 无法唤出键盘，造成无法输入

【效果图】：分组展示选项 =>【去界面操作体验】

el-select 可搜索下拉框，选中选项后，希望立即失去焦点，收起键盘，执行其他逻辑：我的是页面跳转

<el-select  @hook:mounted="removeReadOnly" @visible-change="removeReadOnly" 
				v-model="innerValue"
				filterable
				:remote="true"
				:likeQuery="false"
				@change="changeSelect"
				:clearable="clearable"
				:multiple="multiple"
				:remote-method="fetchOptions"
				size="small"
				popper-class="productGroupSelector"
				:placeholder="placeholder"
				ref="iosSelect"
			>

js代码：


        changeSelect(val) {
			console.log("选项变更值："+val)
            if (this.multiple) {
                this.options.forEach(item => {
                    const arr = item.options.map(m => m.value);
                    item.isIndeterminate = arr.some(v => {
                        return val.some(s => s === v);
                    });
                    item.checked = arr.every(v => {
                        return val.some(s => s === v);
                    });
                    if (item.checked) {
                        item.isIndeterminate = false;
                    }
                });
                this.$emit('change', this.innerValue);
            } else {
                this.$emit('change', val);
            }
			
			// iPad 兼容：延迟 50ms 后失焦（确保键盘能正常关闭）
			setTimeout(() => {
			  const input = this.$refs.iosSelect?.$el?.querySelector('input');
			  input?.blur();
			}, 50);
		},

上一篇：el-select 可搜索下拉框在ios、ipad 无法唤出键盘，造成无法输入