情景：当我用鼠标选中一段文字后，会提示一个提示弹出框，那这个弹出框的位置就和选中的文字的位置有相应的关系。
html:
<div
class="content"
@mousedown.stop="getMouseDown"
@mousemove.stop="moveFlag && getMouseMove($event)"
@mouseup.stop="getMouseUp"
>内容</div>
<span v-if="isShow" class="warn">提示</span>
js:
<script>
data() {
return {
moveFlag :false, // 这个moveFlag是个标志，如果鼠标没按下的时候鼠标移动事件是不触发的moveFlag为false，当鼠标按下的时候把moveFlag设为true，但是按下了不代表就选中了
startPoint:{x:0,y:0}， // 鼠标按下时的起始点
endPoint:{x:0,y:0}， // 鼠标抬起时的结束点
text:'', // 选中的内容
isShow:false, // 是否显示弹窗标志
isMove:false, // 鼠标是否移动
}
}
methods:{
// 鼠标按下
getMouseDown() {
this.text = '' // 清空选择的内容初始化坐标
this.isShow = false;
this.startPoint.x = 0;
this.startPoint.y = 0;
this.endPoint.x = 0;
this.endPoint.y = 0;
this.moveFlag = true
let event; // 浏览器事件记录起始位置
event = event || window.event
this.startPoint.x = event.pageX
this.startPoint.y = event.pageY;
}，
// 鼠标移动
getMouseMove() {
this.isMove = true
},
// 鼠标抬起 计算提示弹窗的位置
getMouseupcoor() {
let event;
event = event || window.event;
this.endPoint.y = event.pageY;
this.endPoint.x = event.pageX;
let height = $(".content").offset().top // 获取内容在当前页面的高度
let width = $(".warn").width()/2
let left = parseInt((this.startPoint.x - this.endPoint.x)/2)
let numTop = this.endPoint.y - height/ 2
let numLeft = this.endPoint.x - width + left - 150 // 这个提示框距左侧的距离这个大小是我自己测试计算出来的，并不是固定的公式，如果有好的方法可以传授给我。。。
$(".content").css({
left:numLeft,
top:numTop
})
if(this.isMove) {
this.text = window.getSelection().toString();
this.isShow = true
}else {
this.text = "";
this.isShow = false
}
}
}
</script>
