vuejs2.0 文章书籍标引标记、鼠标开始结束下标获取、截取文章（基础版）

最新推荐文章于 2023-07-25 02:00:43 发布

原创

最新推荐文章于 2023-07-25 02:00:43 发布 · 471 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Vue.js 2.0中进行文章的标引标记，并实现鼠标选择区域的开始结束下标获取，同时还提供了兼容IE、火狐、谷歌的Demo下载。

这里写图片描述
HTML

<div class="box_fr">
        <textarea name="" class="textarea" ref="textarea" v-model="msg" @click="getSelectPosition">{
  
  {msg}}</textarea>
        <!-- 参数结果 -->
        <div>焦点位置：<input type="text" id="txt1" value=""><br/></div>
        <div>选中起始位置：<input type="text" id="txt2" value=""></div>
        <div>选中结束位置<input type="text" id="txt3" value=""><br/></div>
        <div>选中内容: <div id="txt4"></div></div>
      </div>

Javascript-method

getSelectPosition: function(){
      var nullvalue = -1;
      var selectStart ;//选中开始位置
      var selectEnd ;//选中结束位置
      var position;//焦点位置
      var selectText;//选中内容
      const oTxt = this.$refs.textarea;
      if(oTxt.se