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

上一篇: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 无法唤出键盘,造成无法输入

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值