vue划词弹出框加弹层位置定位

html

<div class="select-word"  @click="SelectText($event)">
		我是内容区域我是内容区域我是内容区域我是内容区域 
</div>

弹层

<div v-show="selectWordVisible" class="select-word" :style="{top:selectY,left:selectX}">
 <ul>
   <li><span class="iconfont el-icon-copy">翻译翻译</span></li>
 </ul>
</div>

data

{
selectWordVisible:false,
selectX: '',
selectY: '',
}

methods

// 划词选中
    SelectText (e) {
      let 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'
        console.log(word);
        console.log(this.selectX, this.selectY)
      } else {
        this.selectWordVisible = false
      }
    },

css

.select-word {
  background: #fff;
  height: 126px;
  width: 126px;
  position: fixed;
  top: 50%;
  left: 50%;
  line-height: 42px;
  border-radius: 5px;
  box-shadow: 0 0 5px #ccc;
  li {
    padding: 0 15px;
    color: #8c8c8c;
  }
  li:hover {
    color: #417be0;
    cursor: pointer;
    background: #e7edfb;
  }
}

效果图