vue指令如何實現氣泡提示（附程式碼）
html5
javascript
vue.js
這篇文章帶給大家的內容是關於vue指令如何實現氣泡提示（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
菜鳥學習之路
//L6zt github
自己 在造組件輪子，也就是瞎搞。
自己寫了個slider組件，想加個氣泡提示。為了復用和省事特此寫了個指令來解決。
預覽位址
專案位址github
#我對指令的理解:前不久看過一部分vnode實作源碼，奈何資質有限...看不懂。
vnode的生命週期-----> 產生前、生成後、產生真正dom、更新 vnode、更新dom 、 銷毀。
而Vue的指令則是依賴vnode 的生命週期， 無非也是有以上類似的鉤子。
程式碼效果
指令掛A元素上，預設產生一個氣泡容器B插入到body 裡面，B 會取得元素A 的位置資訊和自己的
大小訊息，經過一些列的運算，B 元素會定位到A 的中間上位置。當滑鼠放到 A 上 B 就會顯示出來，離開就會消失。
以下程式碼
氣泡指令
#import { on , off , once, contains, elemOffset, position, addClass, removeClass } from '../utils/dom';
import Vue from 'vue'
const global = window;
const doc = global.document;
const top = 15;
export default {
name : 'jc-tips' ,
bind (el , binding , vnode) {
// 确定el 已经在页面里 为了获取el 位置信信
Vue.nextTick(() => {
const { context } = vnode;
const { expression } = binding;
// 气泡元素根结点
const fWarpElm = doc.createElement('p');
// handleFn 气泡里的子元素（自定义）
const handleFn = binding.expression && context[expression] || (() => '');
const createElm = handleFn();
fWarpElm.className = 'hide jc-tips-warp';
fWarpElm.appendChild(createElm);
doc.body.appendChild(fWarpElm);
// 给el 绑定元素待其他操作用
el._tipElm = fWarpElm;
el._createElm = createElm;
// 鼠标放上去的 回调函数
el._tip_hover_fn = function(e) {
// 删除节点函数
removeClass(fWarpElm, 'hide');
fWarpElm.style.opacity = 0;
// 不加延迟 fWarpElm的大小信息 （元素大小是 0 0）---> 删除 class 不是立即渲染
setTimeout(() => {
const offset = elemOffset(fWarpElm);
const location = position(el);
fWarpElm.style.cssText = `left: ${location.left - offset.width / 2}px; top: ${location.top - top - offset.height}px;`;
fWarpElm.style.opacity = 1;
}, 16);
};
//鼠标离开 元素 隐藏 气泡
const handleLeave = function (e) {
fWarpElm.style.opacity = 0;
// transitionEnd 不太好应该加入兼容
once({
el,
type: 'transitionEnd',
fn: function() {
console.log('hide');
addClass(fWarpElm, 'hide');
}
})
};
el._tip_leave_fn = handleLeave;
// 解决 slider 移动结束 提示不消失
el._tip_mouse_up_fn = function (e) {
const target = e.target;
console.log(target);
if (!contains(fWarpElm, target) && el !== target) {
handleLeave(e)
}
};
on({
el,
type: 'mouseenter',
fn: el._tip_hover_fn
});
on({
el,
type: 'mouseleave',
fn: el._tip_leave_fn
});
on({
el: doc.body,
type: 'mouseup',
fn: el._tip_mouse_up_fn
})
});
} ,
// 气泡的数据变化 依赖于 context[expression] 返回的值
componentUpdated(el , binding , vnode) {
const { context } = vnode;
const { expression } = binding;
const handleFn = expression && context[expression] || (() => '');
Vue.nextTick( () => {
const createNode = handleFn();
const fWarpElm = el._tipElm;
if (fWarpElm) {
fWarpElm.replaceChild(createNode, el._createElm);
el._createElm = createNode;
const offset = elemOffset(fWarpElm);
const location = position(el);
fWarpElm.style.cssText = `left: ${location.left - offset.width / 2}px; top: ${location.top - top - offset.height}px;`;
}
})
},
// 删除 事件
unbind (el , bind , vnode) {
off({
el: dov.body,
type: 'mouseup',
fn: el._tip_mouse_up_fn
});
el = null;
}
}登入後複製
slider 元件
<template>
<p>
<section>
</section>
<i>
</i>
</p>
</template>
<script>
import {elemOffset, on, off, once} from "../../utils/dom";
const global = window;
const doc = global.document;
export default {
props: {
step: {
type: [Number],
default: 0
},
rangeEnd: {
type: [Number],
required: true
},
value: {
type: [Number],
required: true
},
minValue: {
type: [Number],
required: true
},
maxValue: {
type: [Number],
required: true
}
},
data () {
return {
startX: null,
width: null,
curValue: 0,
curStep: 0,
left: 0,
tempLeft: 0
}
},
computed: {
wTov () {
let step = this.step;
let width = this.width;
let rangeEnd = this.rangeEnd;
if (width) {
if (step) {
return width / (rangeEnd / step)
}
return width / rangeEnd
}
return null
},
postValue () {
let value = null;
if (this.step) {
value = this.step * this.curStep;
} else {
value = this.left / this.wTov;
}
return value;
}
},
watch: {
value: {
handler (value) {
this.$nextTick(() => {
let step = this.step;
let wTov = this.wTov;
if (step) {
this.left = value / step * wTov;
} else {
this.left = value * wTov;
}
})
},
immediate: true
}
},
methods: {
moveStart (e) {
e.preventDefault();
const body = window.document.body;
const _this = this;
this.startX = e.pageX;
this.tempLeft = this.left;
on({
el: body,
type: 'mousemove',
fn: this.moving
});
once({
el: body,
type: 'mouseup',
fn: function() {
console.log('end');
_this.$emit('input', _this.postValue);
off({
el: body,
type: 'mousemove',
fn: _this.moving
})
}
})
},
moving(e) {
let curX = e.pageX;
let step = this.step;
let rangeEnd = this.rangeEnd;
let width = this.width;
let tempLeft = this.tempLeft;
let startX = this.startX;
let wTov = this.wTov;
if (step !== 0) {
let all = parseInt(rangeEnd / step);
let curStep = (tempLeft + curX - startX) / wTov;
curStep > all && (curStep = all);
curStep < 0 && (curStep = 0);
curStep = Math.round(curStep);
this.curStep = curStep;
this.left = curStep * wTov;
} else {
let left = tempLeft + curX - startX;
left < 0 && (left = 0);
left > width && (left = width);
this.left = left;
}
},
createNode () {
const fElem = document.createElement('i');
const textNode = document.createTextNode(this.postValue.toFixed(2));
fElem.appendChild(textNode);
return fElem;
}
},
mounted () {
this.width = elemOffset(this.$el).width;
}
};
</script>
<style>
.jc-slider-cmp {
position: relative;
display: inline-block;
width: 100%;
border-radius: 4px;
height: 8px;
background: #ccc;
.jc-slider-dot {
position: absolute;
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
left: 0;
top: 50%;
transform: translate(-50%, -50%);
background: #333;
cursor: pointer;
}
.slider-active-bg {
position: relative;
height: 100%;
border-radius: 4px;
background: red;
}
}
</style>登入後複製
############################################ ###../utils/dom######
const global = window;
export const on = ({el, type, fn}) => {
if (typeof global) {
if (global.addEventListener) {
el.addEventListener(type, fn, false)
} else {
el.attachEvent(`on${type}`, fn)
}
}
};
export const off = ({el, type, fn}) => {
if (typeof global) {
if (global.removeEventListener) {
el.removeEventListener(type, fn)
} else {
el.detachEvent(`on${type}`, fn)
}
}
};
export const once = ({el, type, fn}) => {
const hyFn = (event) => {
try {
fn(event)
}
finally {
off({el, type, fn: hyFn})
}
}
on({el, type, fn: hyFn})
};
// 最后一个
export const fbTwice = ({fn, time = 300}) => {
let [cTime, k] = [null, null]
// 获取当前时间
const getTime = () => new Date().getTime()
// 混合函数
const hyFn = () => {
const ags = argments
return () => {
clearTimeout(k)
k = cTime = null
fn(...ags)
}
};
return () => {
if (cTime == null) {
k = setTimeout(hyFn(...arguments), time)
cTime = getTime()
} else {
if ( getTime() - cTime {
return item !== className
})
el.className = classList.join(' ')
};
export const delay = ({fn, time}) => {
let oT = null
let k = null
return () => {
// 当前时间
let cT = new Date().getTime()
const fixFn = () => {
k = oT = null
fn()
}
if (k === null) {
oT = cT
k = setTimeout(fixFn, time)
return
}
if (cT - oT {
let top = 0;
let left = 0;
let offsetParent = son;
while (offsetParent !== parent) {
let dx = offsetParent.offsetLeft;
let dy = offsetParent.offsetTop;
let old = offsetParent;
if (dx === null) {
return {
flag: false
}
}
left += dx;
top += dy;
offsetParent = offsetParent.offsetParent;
if (offsetParent === null && old !== global.document.body) {
return {
flag: false
}
}
}
return {
flag: true,
top,
left
}
};
export const getElem = (filter) => {
return Array.from(global.document.querySelectorAll(filter));
};
export const elemOffset = (elem) => {
return {
width: elem.offsetWidth,
height: elem.offsetHeight
}
};登入後複製
以上是vue指令如何實現氣泡提示（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前
By DDD
Inzoi：如何申請學校和大學
3 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前
By DDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
