快捷導(dǎo)航

vue實(shí)現(xiàn)鼠標(biāo)懸浮框效果

更新時(shí)間：2022年03月31日 10:45:11 作者：天高任鳥飛dyz（前端）

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)懸浮框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)鼠標(biāo)懸浮框效果的具體代碼，供大家參考，具體內(nèi)容如下

效果：

html：

<div
? @mouseenter="enter"?
? @mouseleave="leave"?
? @mousemove="move"
>
鼠標(biāo)觸碰元素
</div>
?
<div v-show="popUpShow" class="hover_con" :style="positionStyle">
懸浮框
</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;
}

關(guān)于offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的區(qū)別

offsetX、offsetY: 鼠標(biāo)相對(duì)于事件源元素（srcElement）的X,Y坐標(biāo)

clientX、clientY: 鼠標(biāo)相對(duì)于瀏覽器窗口可視區(qū)域的X，Y坐標(biāo)（窗口坐標(biāo)），可視區(qū)域不包括工具欄和滾動(dòng)條。

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

screenX、screenY: 鼠標(biāo)相對(duì)于用戶顯示器屏幕左上角的X,Y坐標(biāo)。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue簡易記事本開發(fā)詳解
這篇文章主要為大家詳細(xì)介紹了vue簡易記事本的開發(fā)過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
Vue 理解之白話 getter/setter詳解
這篇文章主要介紹了Vue getter setter，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue結(jié)合leaflet實(shí)現(xiàn)克里金插值
本文主要介紹了Vue結(jié)合leaflet實(shí)現(xiàn)克里金插值，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
vue better-scroll插件使用詳解
本篇文章主要介紹了vue better-scroll插件使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
Vue與compressor.js實(shí)現(xiàn)高效文件壓縮的方法
本文將介紹基于 Vue 框架和 compressor.js 的上傳時(shí)文件壓縮實(shí)現(xiàn)方法,通過在上傳過程中對(duì)文件進(jìn)行壓縮,減小文件大小,提升上傳速度,為用戶創(chuàng)造更快捷、高效的上傳體驗(yàn),感興趣的朋友跟隨小編一起看看吧
2024-03-03
vue elementui select標(biāo)簽監(jiān)聽change事件失效問題
這篇文章主要介紹了vue elementui select標(biāo)簽監(jiān)聽change事件失效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
Vue實(shí)現(xiàn)簡單跑馬燈特效
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡單跑馬燈特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
tauri和vue通信的問題解決方案示例詳解
這篇文章主要為大家介紹了tauri和vue通信的問題解決方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
使用vue cli4.x搭建vue項(xiàng)目的過程詳解
這篇文章主要介紹了使用vue cli4.x搭建vue項(xiàng)目的過程，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-05-05
前端大文件上傳與下載(分片上傳)的詳細(xì)過程
最近遇見一個(gè)需要上傳超大大文件的需求,所以下面這篇文章主要給大家介紹了關(guān)于前端大文件上傳與下載(分片上傳)的詳細(xì)過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11