vue 指令—气泡提示(手撸实战)

共计 7306 个字符，预计需要花费 19 分钟才能阅读完成。

菜鸟学习之路 //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(‘div’);
// 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>
<div class=”jc-slider-cmp”>
<section
class=”slider-active-bg”
:style=”{width: `${left}px`}”
>
</section>
<i
class=”jc-slider-dot”
:style=”{left: `${left}px`}”
ref=”dot”
@mousedown=”moveStart”
v-jc-tips=”createNode”
>
</i>
</div>
</template>

../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 < 0) {
// 清除之前的函数堆 —- 重新记录
clearTimeout(k)
k = null
cTime = getTime()
k = setTimeout(hyFn(…arguments), time)
}
}}
};
export const contains = function(parentNode, childNode) {
if (parentNode.contains) {
return parentNode !== childNode && parentNode.contains(childNode)
} else {
// https://developer.mozilla.org/zh-CN/docs/Web/API/Node/compareDocumentPosition
return (parentNode.compareDocumentPosition(childNode) === 16)
}
};
export const addClass = function (el, className) {
if (typeof el !== “object”) {
return null
}
let classList = el[‘className’]
classList = classList === ” ? [] : classList.split(/\s+/)
if (classList.indexOf(className) === -1) {
classList.push(className)
el.className = classList.join(‘ ‘)
}
};
export const removeClass = function (el, className) {
let classList = el[‘className’]
classList = classList === ” ? [] : classList.split(/\s+/)
classList = classList.filter(item => {
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 < time) {
oT = cT
clearTimeout(k)
k = setTimeout(fixFn, time)
}

}
};
export const position = (son, parent = global.document.body) => {
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 指令—气泡提示(手撸实战)

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）