项目场景:

vue2/3定位光标位置,重新获取焦点


问题描述

在vue中我用到了elementui组件里的select选择器需要将光标定位到需要输入的地方,但是根据ui上面的方法是肯定没问题的,但是不能保证人人都是百分之百原模原样的生效

我就遇到了bug,我明明调用的这个focus重新获取焦点,但是网页报错大概意思是:这个组件没有定义的意思,网上也有说用定时器的这个定时器确实可以做到,但是也不是百分之百就能完全生效,我反正没解决还得自己找原因


原因分析:

我最开始使用的选择器来进行绑定的,id和class我都试了都是报错focus为null没有定义之类的错误,计时器也用了没解决但我肯定是绑定传值有问题,在网上搜了下关于focus不生效的原因发现,这里需要用ref来解决,具体操作如下:


解决方案:

<el-select ref="input_idname" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
																	
<el-option v-for="item in options" :key="item.value" :label="item.icd_code+' '+item.icd_name" :value="item.icd_name"@click="handleClickerss(item)"></el-option>
</el-select>

<el-select ref="input_idname" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
                                                                    
<el-option v-for="item in options" :key="item.value" :label="item.icd_code+' '+item.icd_name" :value="item.icd_name"@click="handleClickerss(item)"></el-option>
</el-select> 

	const shortEdit=function(){					   
			_this.$refs.input_idname.focus()
		}

    const shortEdit=function(){                       
            _this.$refs.input_idname.focus()
        } 

最后将你的方法放到你需要调用的地方即可

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐