vue指令如何完成气泡提示（附代码）
时间：2024/5/21作者：未知来源：争怎路由网人气：
- 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。本篇文章给大家带来的内容是关于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]关键词：vue指令如何完成气泡提示（附代码）