?

?

<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跟随的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。