vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式
自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip
在vue中添加自定義指令,能夠識(shí)別dom,通過鼠標(biāo)hover事件移入當(dāng)前區(qū)域后,顯示浮層
1、directives自定義提示指令
? directives: { ? ? // 自定義提示指令 ? ? tooltip: { ? ? ? componentUpdated: function(el, binding) { ? ? ? ? // 鼠標(biāo)移入時(shí),將浮沉元素插入到body中 ? ? ? ? el.onmouseenter = function(e) { ? ? ? ? ? // 創(chuàng)建浮層元素并設(shè)置樣式 ? ? ? ? ? const vcTooltipDom = document.createElement('div'); ? ? ? ? ? vcTooltipDom.style.cssText = ` ? ? ? ? ? overflow: auto; ? ? ? ? ? position:absolute; ? ? ? ? ? background: #fff;; ? ? ? ? ? color:#666; ? ? ? ? ? box-shadow: rgba(168, 168, 168, 0.295) 1px 2px 10px; ? ? ? ? ? border-radius:5px; ? ? ? ? ? padding:10px; ? ? ? ? ? display:inline-block; ? ? ? ? ? font-size:14px; ? ? ? ? ? z-index:2 ? ? ? ? `; ? ? ? ? ? // 設(shè)置id方便尋找 ? ? ? ? ? vcTooltipDom.setAttribute('id', 'vc-tooltip'); ? ? ? ? ? // 將浮層插入到body中 ? ? ? ? ? document.body.appendChild(vcTooltipDom); ? ? ? ? ? // 浮層中的文字 通過屬性值傳遞動(dòng)態(tài)的顯示文案 ? ? ? ? ? document.getElementById('vc-tooltip').innerHTML = el.getAttribute('tips'); ? ? ? ? }; ? ? ? ? // 鼠標(biāo)移動(dòng)時(shí),動(dòng)態(tài)修改浮沉的位置屬性 ? ? ? ? el.onmousemove = function(e) { ? ? ? ? ? const vcTooltipDom = document.getElementById('vc-tooltip'); ? ? ? ? ? vcTooltipDom.style.top = e.clientY + 15 + 'px'; ? ? ? ? ? vcTooltipDom.style.left = e.clientX + 15 + 'px'; ? ? ? ? }; ? ? ? ? // 鼠標(biāo)移出時(shí)將浮層元素銷毀 ? ? ? ? el.onmouseleave = function() { ? ? ? ? ? // 找到浮層元素并移出 ? ? ? ? ? const vcTooltipDom = document.getElementById('vc-tooltip'); ? ? ? ? ? vcTooltipDom && document.body.removeChild(vcTooltipDom); ? ? ? ? }; ? ? ? } ? ? } ? }
通過監(jiān)聽鼠標(biāo)移入移出的mouse方法,設(shè)置浮層樣式與出現(xiàn)時(shí)機(jī)
2、div顯示dom標(biāo)簽v-tooltip
<div id="bar-echart" tips="共有6個(gè)任務(wù)執(zhí)行成功" v-tooltip/>
此時(shí)運(yùn)行后,出現(xiàn)浮層
vue自定義指令實(shí)現(xiàn)tooltip功能
1、需求
元素展示提示框跟隨鼠標(biāo)移動(dòng)
2、思路
vue的自定義指令
將顯示內(nèi)容放到容器中,通過值傳遞,監(jiān)聽鼠標(biāo)移入事件,鼠標(biāo)移入后將容器append到body
- 監(jiān)聽鼠標(biāo)移動(dòng)事件,根據(jù)鼠標(biāo)的e.clientY,e.clientX修改容器位置
- 監(jiān)聽鼠標(biāo)移出事件,銷毀容器
3、代碼
// 自定義提示指令 directives: { ? ? tooltip(el, binding){ ? ? ? ? // 鼠標(biāo)移入時(shí),將浮沉元素插入到body中 ? ? ? ? el.onmouseenter = function (e) { ? ? ? ? ? // 創(chuàng)建浮層元素并設(shè)置樣式 ? ? ? ? ? const vcTooltipDom = document.createElement("div"); ? ? ? ? ? vcTooltipDom.style.cssText = ` ?? ??? ? ? ? ? ? ?position:absolute; ?? ??? ? ? ? ? ? ?background: #fff;; ?? ??? ? ? ? ? ? ?color:#fff; ?? ??? ? ? ? ? ? ?font-size:14px; ?? ??? ? ? ? ? ? ?z-index:1000 ?? ??? ??? ?; ? ? ? ? ? // 設(shè)置id方便尋找 ? ? ? ? ? vcTooltipDom.setAttribute("id", "vc-tooltip"); ? ? ? ? ? // 將浮層插入到body中 ? ? ? ? ? document.body.appendChild(vcTooltipDom); ? ? ? ? ? // 浮層中的文字 通過屬性值傳遞動(dòng)態(tài)的顯示文案 ? ? ? ? ? document.getElementById("vc-tooltip").innerHTML = ? ? ? ? ? ? el.getAttribute("tips"); ? ? ? ? }; ? ? ? ? // 鼠標(biāo)移動(dòng)時(shí),動(dòng)態(tài)修改浮沉的位置屬性 ? ? ? ? el.onmousemove = function (e) { ? ? ? ? ? const vcTooltipDom = document.getElementById("vc-tooltip"); ? ? ? ? ? vcTooltipDom.style.top = e.clientY + 15 + "px"; ? ? ? ? ? vcTooltipDom.style.left = e.clientX + 15 + "px"; ? ? ? ? }; ? ? ? ? // 鼠標(biāo)移出時(shí)將浮層元素銷毀 ? ? ? ? el.onmouseleave = function () { ? ? ? ? ? // 找到浮層元素并移出 ? ? ? ? ? const vcTooltipDom = document.getElementById("vc-tooltip"); ? ? ? ? ? vcTooltipDom && document.body.removeChild(vcTooltipDom); ? ? ? ? }; ? ? }, ? },
4、在元素上使用
<div v-tooltip :tip='youtxt'></div>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
淺談webpack SplitChunksPlugin實(shí)用指南
這篇文章主要介紹了淺談webpack SplitChunksPlugin實(shí)用指南,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09vue中的.$mount(''#app'')手動(dòng)掛載操作
這篇文章主要介紹了vue中.$mount('#app')手動(dòng)掛載操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue實(shí)現(xiàn)列表滾動(dòng)的過渡動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表滾動(dòng)的過渡動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06Element的el-tree控件后臺(tái)數(shù)據(jù)結(jié)構(gòu)的生成以及方法的抽取
這篇文章主要介紹了Element的el-tree控件后臺(tái)數(shù)據(jù)結(jié)構(gòu)的生成以及方法的抽取,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03Vue安裝sass-loader和node-sass版本匹配的報(bào)錯(cuò)問題
這篇文章主要介紹了Vue安裝sass-loader和node-sass版本匹配的報(bào)錯(cuò)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04解決vue處理axios post請(qǐng)求傳參的問題
下面小編就為大家分享一篇解決vue處理axios post請(qǐng)求傳參的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03