vue3 自定义指令生命周期

时间: 2023-09-21 19:07:11 浏览: 99

vue 指令之气泡提示效果的实现代码

在Vue.js中，指令是一种特殊类型的特性，它们带有前缀`v-`，用于扩展HTML元素的行为。在本文中，我们将深入探讨如何实现一个自定义的Vue指令来创建气泡提示效果。气泡提示通常用于在用户将鼠标悬停在某个元素上时提供额外的信息或指导。我们需要了解Vue指令的生命周期。Vue指令有五个主要阶段：`bind`、`inserted`、`update`、`componentUpdated`和`unbind`。在本例中，我们主要关注`bind`和`update`阶段，因为这两个阶段涉及到元素的创建和更新。 `bind`阶段是在指令首次绑定到元素时触发，用于执行一次性的初始化任务。在这个例子中，我们在`bind`回调中执行以下操作： 1. 创建一个气泡提示的容器元素，并将其添加到文档的body中。 2. 获取气泡提示内容并将其添加到容器元素中。 3. 为元素添加鼠标悬停和离开事件监听器，以便在鼠标进入和离开时显示和隐藏气泡提示。 ```javascript // 创建气泡提示容器 const fWarpElm = doc.createElement('div'); fWarpElm.className = 'hide jc-tips-warp'; // 添加气泡内容 const handleFn = () => {}; const createElm = handleFn(); fWarpElm.appendChild(createElm); // 添加到body doc.body.appendChild(fWarpElm); ``` `update`阶段则在组件的属性变化时被调用，我们可以在这个阶段更新气泡提示的位置。在本例中，我们没有使用`update`，而是通过计算元素的位置和气泡的大小来动态设置气泡的位置，使其始终在元素的上方中央。 ```javascript // 计算气泡位置 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;`; ``` 为了实现气泡的显示和隐藏，我们还利用了`setTimeout`来确保气泡的CSS动画效果，同时添加了过渡结束的监听器来处理动画完成后的隐藏操作。 ```javascript // 鼠标离开时隐藏气泡 el._tip_leave_fn = handleLeave; // 添加过渡结束监听器 once({ el, type: 'transitionEnd', fn: () => { console.log('hide'); addClass(fWarpElm, 'hide'); }, }); ``` 这个实现充分利用了Vue的响应式系统和DOM操作工具，如`Vue.nextTick`来确保在DOM更新后执行操作，以及`on`, `off`, `once`等辅助函数来正确地绑定和移除事件监听器。对于自定义指令的复用性，我们可以将上述逻辑封装成一个可复用的Vue插件或组件。这样，只需要在Vue实例中注册该指令，就可以在任何需要的地方使用，极大地提高了代码的可维护性和可复用性。 Vue的自定义指令机制允许开发者扩展HTML的语义，创建出各种交互效果。在这个例子中，我们看到了如何通过编写自定义指令来实现气泡提示效果，这个效果在许多Web应用中都十分常见，为用户提供了一种方便的方式来获取关于页面元素的更多信息。通过这种方式，开发者能够更高效地构建富交互性的前端应用。

Vue3中的自定义指令生命周期发生了一些变化。首先，钩子函数的名称有所变化。在Vue2中，常用的钩子函数有bind、inserted、update、componentUpdated和unbind。而在Vue3中，这些钩子函数的名称发生了变化，分别是beforeMount、mounted、beforeUpdate、updated和unmounted。这样的改变使得自定义指令的生命周期与Vue3的组合式API更加一致，提高了代码的可读性和可维护性。其次，钩子函数的参数也有所变化。在Vue2中，钩子函数的参数是el、binding、vnode和oldVnode。而在Vue3中，钩子函数的参数是el、binding、vnode和prevVNode。其中，el是当前元素，binding是指令的绑定值，vnode是虚拟节点，prevVNode是之前的虚拟节点。总结一下，Vue3中的自定义指令生命周期发生了名称和参数的变化，名称变化使其更与Vue3的组合式API一致，参数变化则更加符合统一的规范。这些改变提高了代码的可读性和可维护性，使开发更加方便和高效。1234 #### 引用[.reference_title] - *1* *4* [Vue3中自定义指令生命周期的变化及含义？](https://blog.csdn.net/m0_68009075/article/details/130883408)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [（详解）Vue3自定义指令](https://blog.csdn.net/qq_59747594/article/details/130916986)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍](https://download.csdn.net/download/weixin_38743084/12953228)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

阅读全文

vue3 自定义指令生命周期

相关推荐

Vue2实现自定义拖动指令的教程

Vue 3自定义指令详解：基础与实战应用

vue3自定义指令钩子生命周期

vue自定义指令生命周期

vue 自定义指令 生命周期

对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍

vue 自定义指令 生命周期钩子函数

vue2自定义指令的生命周期

Vue3 自定义指令裂图 用生命周期setup 实现

vue3自定义指令使用

vue3 自定义指令传参

vue3自定义指令钩子

vue3 自定义指令封装

vue3 自定义指令 接收动态参数

vue 缩放自定义指令

在vue中 自定义指令

【JavaScript源代码】Vue 3自定义指令开发的相关总结.docx

vue2自定义指令的使用

vue2自定义指令的用法

最新推荐

Vue.directive自定义指令的使用详解

Windows平台下的Fastboot工具使用指南

管理建模和仿真的文件

DLMS规约深度剖析：从基础到电力通信标准的全面掌握

修改代码，使其正确运行

Python机器学习基础入门与项目实践

"互动学习：行动中的多样性与论文攻读经历"

【Shell脚本进阶】：wc命令行数统计的高级用法及解决方案

python编写一个程序，使得根据输入的起点和终点坐标值计算出坐标方位角

Achilles-2 原始压缩包内容解密

vue 自定义指令生命周期

vue 自定义指令生命周期钩子函数

Vue3 自定义指令裂图用生命周期setup 实现

vue3 自定义指令接收动态参数

在vue中自定义指令