vue如何實現鼠標懸浮框效果

這篇文章將為大家詳細講解有關vue如何實現鼠標懸浮框效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

具體內容如下

效果：

html：

<div
  @mouseenter="enter" 
  @mouseleave="leave" 
  @mousemove="move"
>
鼠標觸碰元素
</div>
 
<div v-show="popUpShow" class="hover_con" :>
懸浮框
</div>

js：

export default {
    name: '',
    data() {
      return {
        popUpShow:false,
        positionStyle:{top:'0px',left:'0px'}
      }
    },
    methods: {
      enter() {
        this.popUpShow = true
      },
      leave() {
        this.popUpShow = false
      },
      move(event) {
        const x = event.pageX + 15 + 'px'
        const y = event.pageY + 10 + 'px'
        this.positionStyle = { top: y, left: x }  
      }
    }
}

css：

.hover_con{
  position: fixed;
  max-width: 220px;
  padding: 10px;
  border: 1px solid #666;
  background: #ccc;
}

關于offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的區別

offsetX、offsetY: 鼠標相對于事件源元素（srcElement）的X,Y坐標

clientX、clientY: 鼠標相對于瀏覽器窗口可視區域的X，Y坐標（窗口坐標），可視區域不包括工具欄和滾動條。

pageX、pagey: 類似于event.clientX、event.clientY，但它們使用的是文檔坐標而非窗口坐標。這2個屬性不是標準屬性，但得到了廣泛支持。IE事件中沒 有這2個屬性

screenX、screenY: 鼠標相對于用戶顯示器屏幕左上角的X,Y坐標。

關于“vue如何實現鼠標懸浮框效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。