Vue自定义指令详解——以若依框架中封装指令为例分析

自定义指令

在Vue.js中,自定义指令提供了一种非常灵活的方式来扩展Vue的功能。以下是对Vue中自定义指令的详细解释:

一、自定义指令的基本概念

自定义指令允许开发者直接对DOM元素进行低层次操作,而无需编写大量的模板或者JavaScript代码。它们可以响应Vue的响应式系统,从而在数据变化时触发相应的DOM更新。

二、自定义指令的注册

  1. 全局注册

使用Vue.directive(name, definition)方法可以在全局范围内注册一个自定义指令。例如:

Vue.directive('my-directive', {
// 指令的定义
bind: function (el, binding, vnode, oldVnode) {
// 只调用一次,指令第一次绑定到元素时调用
// 在这里可以进行一次性的初始化设置
},
// 其他钩子函数...
});
  1. 局部注册

在组件中,可以使用directives选项来局部注册自定义指令。例如:

export default {
directives: {
'my-directive': {
// 指令的定义
bind: function (el, binding, vnode) {
// ...
},
// 其他钩子函数...
}
},
// 其他组件选项...
};

或者在setup函数中使用directives选项:

<script setup>
const myDirective = {
// 指令的定义
mounted: (el) => {
// ...
},
// 其他钩子函数...
};
</script><template>
<div v-my-directive></div>
</template>

三、自定义指令的钩子函数

自定义指令可以包含多个钩子函数,这些钩子函数在指令的不同生命周期阶段被调用:

  1. bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  2. inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)。
  3. update:所在组件的VNode更新时调用,但是可能发生在其子VNode更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
  4. componentUpdated:指令所在组件的VNode及其子VNode全部更新后调用。
  5. unbind:只调用一次,指令与元素解绑时调用。

四、自定义指令的参数和修饰符

  1. 参数:指令的参数可以是动态的,通过v-mydirective:[argument]="value"的形式传递。在指令的钩子函数中,可以通过binding.arg访问到参数的值。
  2. 修饰符:修饰符是以.开头的特殊后缀,用于对指令的行为进行微调。在指令的钩子函数中,可以通过binding.modifiers访问到修饰符的对象。

五、自定义指令的示例

以下是一个简单的自定义指令示例,用于在元素上添加点击时的动画效果:

Vue.directive('click-animate', {
bind(el, binding) {
// 定义点击时的动画效果
el.animateClick = () => {
el.classList.add('click');
setTimeout(() => {
el.classList.remove('click');
}, 100);
};
},
handleEvent(event) {
if (event.type === 'click') {
el.animateClick();
}
}
});

在模板中使用:

<button v-click-animate>Click me!</button>

六、自定义指令的注意事项

  1. 在使用自定义指令时,请确保指令的名称不与Vue的内置指令冲突。
  2. 在指令的钩子函数中,请避免直接修改binding对象的属性,因为它是只读的。
  3. 如果需要在多个组件中重复使用自定义指令,建议将其注册为全局指令。

综上所述,Vue中的自定义指令提供了一种强大的方式来扩展Vue的功能,允许开发者直接对DOM元素进行低层次操作,并响应数据的变化。通过合理地使用自定义指令,可以实现各种复杂的DOM操作和逻辑控制。

若依框架中自定义指令分析

1.登录系统

根据用户后端返回用户信息,包括permisssions(Array)、roles和users 信息

 2.封装v-hasPermi指令(src/directive/permission/hasPermi.js)

用于判断当前用户是否有此权限。没有此权限(如:普通用户没有删除信息的权限)对应按钮就将移除【通过指令钩子函数的el参数修改DOM】

import store from '@/store'export default {//可访问到DOMinserted(el, binding, vnode) {const { value } = bindingconst all_permission = "*:*:*";//所有权限const permissions = store.getters && store.getters.permissions//vuex中存的当前用户右的权限//绑定时为v-hasPermi="[]",值为数组类型if (value && value instanceof Array && value.length > 0) {const permissionFlag = value//当前按钮所需权限//当前用户是否存在此权限const hasPermissions = permissions.some(permission => {return all_permission === permission || permissionFlag.includes(permission)})if (!hasPermissions) {//没有对应权限就移除对应按钮!!!el.parentNode && el.parentNode.removeChild(el)}} else {throw new Error(`请设置操作权限标签值`)}}
}

3.导出所有自定义指令至插件index.js(src/directive/index.js) 

将项目封装的所有指令以插件的型式导出去

import hasRole from './permission/hasRole'
import hasPermi from './permission/hasPermi'
import dialogDrag from './dialog/drag'
import dialogDragWidth from './dialog/dragWidth'
import dialogDragHeight from './dialog/dragHeight'
import clipboard from './module/clipboard'const install = function(Vue) {Vue.directive('hasRole', hasRole)Vue.directive('hasPermi', hasPermi)Vue.directive('clipboard', clipboard)Vue.directive('dialogDrag', dialogDrag)Vue.directive('dialogDragWidth', dialogDragWidth)Vue.directive('dialogDragHeight', dialogDragHeight)
}if (window.Vue) {window['hasRole'] = hasRolewindow['hasPermi'] = hasPermiVue.use(install); // eslint-disable-line
}export default install

4.使用指令

使用 v-directiveName="value"

        <el-buttontype="primary"plainicon="el-icon-plus"size="mini"@click="handleAdd"v-hasPermi="['system:dept:add']">新增</el-button>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/469756.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sql server启用远程连接与修改默认端口

一&#xff0c;数据库右键属性 二&#xff0c;sa账号状态属性启用 三&#xff0c;SQL Server配置管理器, 点击SQL Server 服务选项&#xff0c;确定SQL Server是正在运行的。 四&#xff0c;手动修改数据库的连接端口 1&#xff09;确保启用 2)修改默认端口 3)客户端IP改为一…

吴恩达机器学习笔记(3)

吴恩达机器学习&#xff08;3&#xff09; tensorflow实现 用 TensorFlow 实现神经网络 以下是一个完整的代码示例&#xff0c;展示如何使用 TensorFlow 和 Keras 构建和训练一个简单的神经网络来处理 MNIST 数据集&#xff1a; import tensorflow as tf from tensorflow.k…

【入门篇】A+B Problem——多语言版

AB Problem 跳转 题目分析&#xff1a; 这个题目要求输入两个整数 a 和 b&#xff0c;然后输出它们的和。需要注意的是 a 和 b 的绝对值都不超过 10^9。此外&#xff0c;题目中提到了 Pascal 使用 integer 类型可能会爆掉&#xff0c;说明需要使用更大范围的数据类型来处理这…

Matlab实现鹈鹕优化算法(POA)求解路径规划问题

目录 1.内容介绍 2.部分代码 3.实验结果 4.内容获取 1内容介绍 鹈鹕优化算法&#xff08;POA&#xff09;是一种受自然界鹈鹕捕食行为启发的优化算法。该算法通过模拟鹈鹕群体在寻找食物时的协作行为&#xff0c;如群飞、潜水和捕鱼等&#xff0c;来探索问题的最优解。POA因其…

LED和QLED的区别

文章目录 1. 基础背光技术2. 量子点技术的引入3. 色彩表现4. 亮度和对比度5. 能效6. 寿命7. 价格总结 LED和 QLED都是基于液晶显示&#xff08;LCD&#xff09;技术的电视类型&#xff0c;但它们在显示技术、色彩表现和亮度方面有一些关键区别。以下是两者的详细区别&#xff…

《JavaEE进阶》----20.<基于Spring图书管理系统①(登录+添加图书)>

PS&#xff1a;关于接口定义 接口定义&#xff0c;通常由服务器提供方来定义。 1.路径&#xff1a;自己定义 2.参数&#xff1a;根据需求考虑&#xff0c;我们这个接口功能完成需要哪些信息。 3.返回结果&#xff1a;考虑我们能为对方提供什么。站在对方角度考虑。 我们使用到的…

OpenEuler 下 Docker 安装、配置与测试实例

文章目录 前言1. 环境准备2. 下载 Docker3.配置服务文件4.配置加速器加速下载docker镜像5. 验证 Docker 安装 前言 Docker 安装大致分为包管理器安装、脚本安装、离线手动安装、容器编排工具安装、桌面版安装等&#xff0c;每种安装各有特点&#xff0c;但涉及知识面不少&…

如何线程安全的使用HashMap

前言 Map一直是面试中经常被问到的问题。博主在找工作的过程中&#xff0c;就被问到了这样一个问题&#xff1a; Map是线程安全的吗&#xff1f;我不考虑使用线程安全的Map(eg&#xff1a;ConcurrentHashMap) 。如何在多线程/高并发下安全使用 HashMap&#xff1f; 当时博主…

Android CarrierConfig 参数项和正则匹配逻辑

背景 在编写CarrierConfig的时候经常出现配置不生效的情况&#xff0c;比如运营商支持大范围的imsi&#xff0c;或者是测试人员写卡位数的问题等等&#xff0c;因此就需要模式匹配&#xff08;包含但不限于正则表达式&#xff09;。 基本概念: 模式匹配涉及定义一个“模式”&a…

现代Web开发:Vue 3 组件化开发实战

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 现代Web开发&#xff1a;Vue 3 组件化开发实战 现代Web开发&#xff1a;Vue 3 组件化开发实战 现代Web开发&#xff1a;Vue 3 组…

吾店云介绍 – 中国人的WordPress独立站和商城系统平台

经过多年在WordPress建站领域的摸索和探索&#xff0c;能轻松创建和管理各种类型网站的平台 – 吾店云建站平台诞生了。 应该说这是一个艰苦卓绝的过程&#xff0c;在中国创建一个能轻松创建和使用WordPress网站的平台并不容易&#xff0c;最主要是网络环境和托管软件的限制。…

「QT」几何数据类 之 QLine 整型直线类

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid…

游戏引擎学习第五天

这节貌似没讲什么 视频参考:https://www.bilibili.com/video/BV1Gmm2Y5EwE/ uint8 *A somewhere in memory; uint8 *B somewhere in memory;//BEFORE WE GOT TO HERE int Y *B; // whatever was actually there before the 5 *A 5; int X *B; // 5 //Obviously! Y and …

uniapp分享功能

页面生命周期 https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle onShareTimeline 监听用户点击右上角转发到朋友圈 微信小程序 2.8.1 onAddToFavorites 监听用户点击右上角收藏 微信小程序、QQ小程序 2.8.1 onShareAppMessage 用户点击右上角分享 微信小程序、QQ小程…

小程序中引入下载到本地的iconfont字体图标加载不出来问题解决

我这个是uniapp项目,字体图标都是一样的,在vue项目中web端、uniapp运行到h5都没问题,但是运行到小程序加载不出来,报错如下: 不让用本地路径,所以我们要转为base64编码,这里给大家提供一个工具,它可以把本地字体文件转为base64:transfonter 进入官网后,第一步: …

Sql server 备份还原方法

备份 方法1&#xff0c;选择对应的数据库名-------》右键 任务---------》备份 默认备份类型 完整 文件后缀 .bak 方法2,选择对应的数据库名-------》右键 任务----------》生成脚本 选择要编写的数据库对象(表&#xff0c;视图&#xff0c;存储过程等) 选择对应的 服…

中兴光猫修改SN,MAC,修改地区,异地注册,改桥接,路由拨号

前言 请先阅读上一篇博客获取到光猫超级密码电信光猫获取超级密码 电信光猫天翼网关4.0获取超级密码教程 四川电信光猫 中兴 F1855V2 ZXHN F1855V2 telent权限 实战 实测_天翼4.0光猫超级密码-CSDN博客 修改SN-修改地区&#xff0c;光猫异地注册&#xff0c;设置桥接模式&#…

AI大模型开发架构设计(14)——基于LangChain大模型的案例架构实战

文章目录 基于LangChain大模型的案例架构实战1 LangChain 顶层架构设计以及关键技术剖析LangChain 是什么?LangChain的主要功能是什么&#xff1f;LangChain 顶层架构设计LangChain 典型使用场景&#xff1a;QA 问答系统LangChain 顶层架构设计之 Model I/OLangChain 顶层架构…

Ubuntu 的 ROS 操作系统turtlebot3环境搭建

引言 本文介绍如何在Ubuntu系统中为TurtleBot3配置ROS环境&#xff0c;包括安装和配置ROS Noetic的步骤&#xff0c;为PC端控制TurtleBot3提供操作指南。 安装和配置的过程分为PC设置、系统安装、依赖安装等部分&#xff0c;并在最后进行网络配置&#xff0c;确保PC端能够顺利…

009_SSH_Mysql图书管理系统(学生注册 借书 还书 绵阳)——lwplus87(免费送)

Abstract IV 第1章 概述... 1 1.1 课题背景... 1 1.2 课题意义... 1 1.3 文献综述... 2 1.3.1 技术综述... 2 1.4 总体设计原则... 2 第2章 系统分析... 4 2.1 系统的需求分析... 4 2.2 业务流程分析... 5 2.2.1 系统管理员业务流程分析... 5 2.3 数据流程分析... 7 2.3.1 图书…