vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式
更新時(shí)間：2022年10月21日 09:16:51 作者：騎上我心愛的小摩托
這篇文章主要介紹了vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip
在vue中添加自定義指令，能夠識(shí)別dom，通過(guò)鼠標(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);
? ? ? ? ? // 浮層中的文字 通過(guò)屬性值傳遞動(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);
? ? ? ? };
? ? ? }
? ? }
? }通過(guò)監(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)容放到容器中，通過(guò)值傳遞，監(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);
? ? ? ? ? // 浮層中的文字 通過(guò)屬性值傳遞動(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è)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于vue中對(duì)鼠標(biāo)劃過(guò)事件的處理方式詳解
- vue+mousemove實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能(拖動(dòng)過(guò)快失效問(wèn)題解決方法)
- vue鼠標(biāo)懸停事件實(shí)例詳解
- vue實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果(示例代碼)
- vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示懸浮框效果
- 如何利用 vue實(shí)現(xiàn)鼠標(biāo)懸停時(shí)顯示元素或文本
- Vue中常用的鼠標(biāo)移入移出事件詳解
- 利用Vue3實(shí)現(xiàn)鼠標(biāo)跟隨效果
- 使用Vue3實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)跟隨效果
- vue3實(shí)現(xiàn)鼠標(biāo)跟隨傾斜動(dòng)態(tài)效果實(shí)例
相關(guān)文章
Vue3源碼通過(guò)render?patch?了解diff
這篇文章主要為大家介紹了Vue3源碼系列通過(guò)render及patch了解diff原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
vue移動(dòng)端實(shí)現(xiàn)手機(jī)左右滑動(dòng)入場(chǎng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端實(shí)現(xiàn)手機(jī)左右滑動(dòng)入場(chǎng)動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
vue使用threeJs導(dǎo)入obj模型并實(shí)現(xiàn)添加標(biāo)注
這篇文章主要介紹了vue使用threeJs導(dǎo)入obj模型并實(shí)現(xiàn)添加標(biāo)注方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了Vue打包路徑配置過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue.js中this如何取到data和method里的屬性詳解
methods屬性是一個(gè)對(duì)象,通常我們會(huì)在這個(gè)對(duì)象中定義很多的方法,下面這篇文章主要給大家介紹了關(guān)于Vue.js中this如何取到data和method里的屬性,需要的朋友可以參考下2022-12-12
VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新
今天小編就為大家分享一篇VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue中的vue-router?query方式和params方式詳解
這篇文章主要介紹了vue中的vue-router?query方式和params方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue項(xiàng)目部署之從本地到線上環(huán)境實(shí)踐
文章詳細(xì)介紹了如何將Vue項(xiàng)目從本地環(huán)境部署到線上服務(wù)器,包括打包本地項(xiàng)目、服務(wù)器環(huán)境搭建、項(xiàng)目上傳與配置以及解決部署后頁(yè)面訪問(wèn)異常問(wèn)題2026-02-02
淺談Vue3 Composition API如何替換Vue Mixins
這篇文章主要介紹了淺談Vue3 Composition API如何替換Vue Mixins，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue單頁(yè)面在微信下只能分享落地頁(yè)的解決方案
這篇文章主要介紹了vue單頁(yè)面在微信下只能分享落地頁(yè)的解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04