vue中轻松搞掂鼠标气泡框提示框tip跟随

 

 

<template><div><!-- 提示框 --><sg-tip :show="isShowTip">{{tipContent}}</sg-tip><!-- 移入某个元素触发显示跟随提示框显示--><div class="red" @mouseover="showTip($event.target.innerText)" @mouseout="hideTip"><p>The current baseline outlook for suggests</p></div></div>
</template><script>export default {data() {return {isShowTip: false,tipContent: ""};},mounted() {this.mouseFllow();},methods: {showTip(text = "") {this.tipContent = text;this.isShowTip = true;},hideTip() {this.isShowTip = false;},mouseFllow() {// 鼠标跟随tipvar sgTip = document.querySelector("sg-tip");document.onmousemove = function (e) {var x = e.pageX,y = e.pageY,offset = 20;sgTip.style.left = x + offset + "px";sgTip.style.top = y + offset + "px";};}}};
</script>

总结

以上是生活随笔为你收集整理的vue中轻松搞掂鼠标气泡框提示框tip跟随的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。