当前位置:   article > 正文

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

vue3设置光标位置

项目场景:

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


问题描述

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

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


原因分析:

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


解决方案:

  1. <el-select ref="input_idname" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
  2. <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>
  3. </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> 

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

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/492668
推荐阅读
相关标签
  

闽ICP备14008679号