vue - 前端实现划选的方式

划选（鼠标选中之后触发，显示提示框）

<!-- 划选弹层 -- ellipsis 是我自己定义的省略号样式  -->
<div v-show="selectWordVisible" class="select-word" :style="{top:selectY,left:selectX}">
  <ul>
    <li :title="selectWord" class="ellipsis" @click="searchSelectWord">搜索{{ `"${ selectWord }"` }}</li>
    <li v-for="(item, index) in searchListName" :key="index" @click="searchTypeClick(item)">{{ item.name }}</li>
  </ul>
</div>
// 划选样式
.select-word {
 width: 232px;
 background: #fff;
 position: fixed;
 top: 50%;
 left: 50%;
 line-height: 42px;
 border-radius: 5px;
 box-shadow: 0 0 5px #ccc;
 ul, li {
   padding: 0px;
   margin: 0px;
   list-style: none;
 }
 li {
   padding: 0 15px;
   font-size: 16px;
   color: #272A31;
 }
 li:hover {
   color: #417be0;
   cursor: pointer;
   background: #e7edfb;
 }
}
// data 中定义的数据
// 划选数据
selectWordVisible: false,
selectX: '', // 定位的水平偏移量
selectY: '', // 定位的垂直偏移量
selectWord: '', // 选中后的文本
searchListName: [] // 弹层框数据，可自行定义数据结构
// 划词选中，给内容区区域添加点击事件SelectText（事件可以自己定义名称），参数可传可不传
SelectText(e) {
  const word = window.getSelection().toString().trim().replace(/\n/g, '') // 选中的内容
  if (word !== '') {
    this.selectWordVisible = true
    this.selectX = e.x + 20 + 'px'
    this.selectY = e.y + 20 + 'px'
    this.selectWord = word
  } else {
    this.selectWordVisible = false
    this.selectWord = ''
  }
}