基于vue鼠标双击文本全选及获取光标位置

鼠标双击文本全选

实现效果如图：

双击选中文本

vue项目如何实现：

1.HTML部分

<template>
      <div @dblclick="getSelectText"=''>鼠标双击文本全部选择</div>  
</template>

2.js部分

  methods:  {
        getSelectText (e) {
            if  (document.body.createTextRange)  {
                // IE兼容
                var range = document.body.createTextRange();
                range.moveToElementText(e.target);
                range.select();
            } else {
                let selection = window.getSelection();
                let range = document.createRange();
                range.selectNodeContents(e.target);
                selection.removeAllRanges();
                selection.addRange(range);
            }
       }
  }

input元素获取光标下标

1.HTML部分

<template>
      <input @click="getTextIndex'' value=''鼠标双击文本全部选择" />  
</template>

2.js部分

  methods:  {
      getTextIndex (e) {
            let target = e.target, index;
            if (target.selectionStart) {
                  index = target.selectionStart;
            } else {
                  let range = document.selection.createRange(); 
                  index = range.text.length;
            }
            return index;
       }
  }

最后总结

根据不同需求，逻辑可以进行相应修改，比如设置光标的位置以及光标位置下插入文本等。