vue获取+设置光标位置 光标定位 选择输入框文本

版本：vue2、vant2
在vue是用ref、

     r 
    
   
     e 
    
   
     f 
    
   
     s 
    
   
     获取 
    
   
     d 
    
   
     o 
    
   
     m 
    
   
     的，在 
    
   
     v 
    
   
     a 
    
   
     n 
    
   
     t 
    
   
     框架里 
    
   
     v 
    
   
     a 
    
   
     n 
    
   
     − 
    
   
     f 
    
   
     i 
    
   
     e 
    
   
     l 
    
   
     d 
    
   
     是输入框组件，它不支持直接设置光标的方法 
    
   
     s 
    
   
     e 
    
   
     t 
    
   
     S 
    
   
     e 
    
   
     l 
    
   
     e 
    
   
     c 
    
   
     t 
    
   
     i 
    
   
     o 
    
   
     n 
    
   
     R 
    
   
     a 
    
   
     n 
    
   
     g 
    
   
     e 
    
   
     ( 
    
   
     ) 
    
   
     ，所以通过 
    
   
     t 
    
   
     h 
    
   
     i 
    
   
     s 
    
   
     . 
    
   
  
    refs获取dom的，在vant框架里van-field是输入框组件，它不支持直接设置光标的方法setSelectionRange()，所以通过this. 
   
  
refs获取dom的，在vant框架里van−field是输入框组件，它不支持直接设置光标的方法setSelectionRange()，所以通过this.refs.be.$refs.input获取到input这个原生dom，再对其使用设置光标：

<van-field label="邮 箱" v-model.trim="buyerEmail" ref="be" placeholder="电子邮箱" clearable></van-field><script>exportdefault{methods:{//我这里实现的是点击按钮自动在输入框后面加上@qq.comfillEmail(a){let em =this.buyerEmail ?this.buyerEmail :'';this.buyerEmail = em + a;let d =this.$refs.be.$refs.input;//获取domthis.$refs.be.focus();//设置焦点this.$nextTick(()=>{//必需//setSelectionRange两个参数是光标的起、止位置//设置一样就是闪烁光标，不一样就是选择文本//这里我是选择@前的内容
        d.setSelectionRange(0,this.buyerEmail.indexOf('@')); 
        console.log(d.selectionStart)//获取光标起始位置
        console.log(d.selectionEnd)//获取光标结束位置})},}}<script>