欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實現(xiàn)鼠標懸浮框效果

 更新時間：2022年03月31日 10:45:11   作者：天高任鳥飛dyz（前端）  
這篇文章主要為大家詳細介紹了vue實現(xiàn)鼠標懸浮框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

效果：

html：

<div
? @mouseenter="enter"?
? @mouseleave="leave"?
? @mousemove="move"
>
鼠標觸碰元素
</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;
}

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

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

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

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

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

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

相關文章

  • vue實現(xiàn)復制文字復制圖片實例詳解

    vue實現(xiàn)復制文字復制圖片實例詳解

    這篇文章主要為大家介紹了vue實現(xiàn)復制文字復制圖片實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-02-02
  • vue修改vue項目運行端口號的方法

    vue修改vue項目運行端口號的方法

    本篇文章主要介紹了vue修改vue項目運行端口號的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • Vue中的.vue文件的使用方式

    Vue中的.vue文件的使用方式

    這篇文章主要介紹了Vue中的.vue文件的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-03-03
  • vue動態(tài)生成新表單并且添加驗證校驗規(guī)則方式

    vue動態(tài)生成新表單并且添加驗證校驗規(guī)則方式

    這篇文章主要介紹了vue動態(tài)生成新表單并且添加驗證校驗規(guī)則方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • 詳解基于iview-ui的導航欄路徑（面包屑）配置

    詳解基于iview-ui的導航欄路徑（面包屑）配置

    這篇文章主要介紹了詳解基于iview-ui的導航欄路徑（面包屑）配置,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • Vue實現(xiàn)PC端靠邊懸浮球的代碼

    Vue實現(xiàn)PC端靠邊懸浮球的代碼

    這篇文章主要介紹了Vue實現(xiàn)靠邊懸浮球(PC端)效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-05-05
  • Vue3?中的模板語法小結

    Vue3?中的模板語法小結

    Vue 使用一種基于 HTML 的模板語法，使我們能夠聲明式地將其組件實例的數(shù)據(jù)綁定到呈現(xiàn)的 DOM 上，這篇文章主要介紹了Vue3?中的模板語法,需要的朋友可以參考下
    2023-03-03
  • vue3解決各場景l(fā)oading過度的五種方法

    vue3解決各場景l(fā)oading過度的五種方法

    這篇文章主要為大家詳細介紹了vue3中解決各場景l(fā)oading過度的五種方法,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以學習一下
    2023-11-11
  • Element-ui tree組件自定義節(jié)點使用方法代碼詳解

    Element-ui tree組件自定義節(jié)點使用方法代碼詳解

    本文通過實例代碼給大家介紹了Element-ui tree組件自定義節(jié)點使用方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2018-09-09
  • Vue通過WebSocket建立長連接的實現(xiàn)代碼

    Vue通過WebSocket建立長連接的實現(xiàn)代碼

    這篇文章主要介紹了Vue通過WebSocket建立長連接的實現(xiàn)代碼，文中給出了問題及解決方案,需要的朋友可以參考下
    2019-11-11

最新評論