js如何实现画词评论?

评论 ，是一个系统很常见的功能，回复回复再回复。

过程过于死板，那能否选中某句话？对某句话进行评论？

处于对该功能的需求，花费了一定的时间进行研究、查询、尝试。终于，摸索出一个简单的办法，特此记录。

先放出效果：
1.鼠标滑动选中某关键字

2.弹窗进行评论

那么，是怎么实现的呢？
思路如下：
1.监听mouseup事件
2.获取选中的内容
3.打开弹窗
4.进行评论发表

关键属性：
Window.getSelection
返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。

【MDN 属性介绍】

1.监听mouseup事件
首先要对时间绑定，赋予一个回调函数

html

<div @mouseup="selectHandle"> 
	想要实现画词评论，这肯定是一个比较好的想法，该如何实现要好好思量一番。
</div>

2.获取选中的内容
3.打开弹窗

javascript

selectHandle(event) {
      let selectd = window.getSelection(); // selected  是一个 selection 对象
      let selectText = selectd.toString(); // 将 selection 对象转换成字符串
      if (selectText.trim() == "") return; // 如果选中的不是空
      this.alertDialog = true;
      this.selectedValue = selectText;

	//  获取鼠标位置
      let sh =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop ||
          0,
        left = event.clientX - 40 < 0 ? event.clientX + 20 : event.clientX - 40,
        top =
          event.clientY - 40 < 0
            ? event.clientY + sh + 20
            : event.clientY + sh - 40;
    },

如此，就将选中的文本进行了获取，并且赋值给本地的一个变量。
后面就是简单的评论js

html 这里是关于弹窗的布局。⬇️

<template>
  <el-dialog
    class="publish-comment"
    :title="title"
    :visible.sync="alertDialog"
    :before-close="cancelHandle"
  >
    <div>
      <el-input type="textarea" :rows="5" placeholder="评论内容写在此哦～" v-model="commentValue"></el-input>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancelHandle">取 消</el-button>
      <el-button type="primary" @click="submitDialog">确 定</el-button>
    </span>
  </el-dialog>
</template>

javascript 这里是定义的一些变量。下

 title: "发表评论:", // dialog的默认标题
 alertDialog: false, // 是否展示该弹窗
 selectedValue: "这里显示被选中的词", //这里显示被选中的词
 commentValue: "" // 这里为要评论的内容

然后就根据所需要的进行调整修改，发表评论就OK啦～