关于我在项目中封装的一些自定义指令

什么是指令

在Vue中提供了一套为数据驱动视图更为方便的操作,这些操作被称为指令系统。我们看到的v-来头的行内属性,都是指令,不同的指令可以完成或者实现不同的功能。

除了核心功能默认内置的指令(v-model和v-show),Vue也允许注册自定义指令

指令使用的几种方式:

//会实例化一个指令,但这个指令没有参数 
`v-xxx`// -- 将值传到指令中
`v-xxx="value"`  // -- 将字符串传入到指令中,如`v-html="'<p>内容</p>'"`
`v-xxx="'string'"` // -- 传参数(`arg`),如`v-bind:class="className"`
`v-xxx:arg="value"` // -- 使用修饰符(`modifier`)
`v-xxx:arg.modifier="value"` 

如何实现

注册一个自定义指令类似于组件注册,分为全局注册和局部注册。

  • 全局注册:Vue.directive
  • 局部注册:组件directives属性

举例如下:

Vue.directive第一个参数是指令的名字(不需要加上v-前缀),第二个参数可以是一个对象,也可以是一个指令函数

Vue.directive('focus',{inserted:function(el){// 聚焦元素el.focus();//页面加载完成之后自动让输入框获取到焦点的小功能}
})

局部注册通过在组件options选项中设置directive属性

directive:{// 指令的定义focus:{inserted:function(el){el.focus()}}
}

然后可以在模板中任何元素上使用v-focus指令,如下:

<input v-focus />

自定义指令也想组件一样存在钩子函数:

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

所有钩子函数的参数都有以下:

  • el:指令所绑定的元素,可以用来直接操作DOM
  • binding:一个对象,包含以下property:
    • name:指令名,不包含v-前缀
    • value:指令的绑定值,例如:v-my-directive=“1+1”中,绑定值为2。
    • oldValue:指令绑定的前一个值, 仅在update和componentUpdate钩子中可用。无论值是否改变都可用。
    • expression:字符串形式的指令表达式。例如v-my-directive="1+1"中,表达式为“1+1”
    • arg:传给指令的参数,可选,例如v-my-directive:foo中,参数为“foo”
    • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar中,修饰符对象为{ foo: true, bar: true }
    • vnode:Vue编译生成的虚拟节点
    • oldVnode:上一个虚拟节点,仅在update和componentUpdate钩子可用

注意:除了el之外,其他参数都应该是只读的,切勿进行修改。如果需要再钩子之间共享数据,建议通过元素的dataset来进行。

举个栗子:

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
<script>Vue.directive('demo', function (el, binding) {console.log(binding.value.color) // "white"console.log(binding.value.text)  // "hello!"})
</script>

应用场景

使用自定义指令可以满足我们的日常一些场景,这里我列举几个我在项目中用到的自定义指令:

  • 表单防止重复提交
  • 一键copy的功能

防止表单重复提交

Vue.directive('throttle', {inserted(el, binding) {// 获取指令参数时间,没有则默认赋值为2000let throttleTime = parseInt(binding.value) || 2000el.addEventListener('click', () => {// 第一次执行if (!el.disabled) {// 如果是第一次执行则表示可以进行点击操作el.disabled = truesetTimeout(() => {el.disabled = false}, throttleTime)}})}
})// 2.为button标签设置v-throttle自定义指令
<Button size="large" type="success" v-throttle="5000">新增</Button>

 一键复制功能

// 一键复制自定义指令
Vue.directive('copy', {// 选取文本框内容// 执行浏览器复制命令// 复制命令会将当前选中的内容复制到剪切板中(这里就是创建的input标签)// Input要在正常的编辑状态下原生复制方法才会生效inserted (el, binding) {if (!binding.value) {Message.error('请传入需要复制的内容')return}el.addEventListener('click', () => {console.log('binding.value', binding.value)      // 模拟输入框let cInput = document.createElement('input')if (binding.value.newAccount === '') {cInput.value = '密码' + ':' + binding.value.newPassword} else {cInput.value = `企业名称:${binding.value.newCompanyName} , 用户名:${binding.value.newWebAccount} , 密码:${binding.value.newPassword};`}document.body.appendChild(cInput);cInput.select();document.execCommand("copy");Message.success('复制成功')document.body.removeChild(cInput);this.dialogVisible = false;// 这个根据自己业务自定义Vue.prototype.$emit("afterComfirm");})},componentUpdated(el, { value }) {el.$value = value;},
})// 为button标签设置v-copy自定义指令
<Button size="large" type="success" v-copy="infoObj">新增</Button>// 其中infoObj如下:
infoObj:{newPassword:this.newPassword,newAccount:this.newAccount...
}// 后面可以扩展将字段为传入的字段,不要写死

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

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

相关文章

开源计算机视觉库opencv-python详解

开源计算机视觉库opencv-python详解 OpenCV-Python的核心功能&#xff1a;安装OpenCV-Python&#xff1a;使用OpenCV-Python的基本步骤&#xff1a;OpenCV-Python的高级应用&#xff1a;注意事项&#xff1a;OpenCV-Python的高级应用示例&#xff1a;1. 人脸识别2. 目标跟踪3. …

记录一则 线上域名证书更新及cdn证书更新

本篇为阿里云免费证书更新记录。 登录阿里云账号 搜索数字证书管理服务管理控制台 点击创建证书 输入你的域名 填写相关信息&#xff08;注&#xff1a;域名验证方式选择文件验证&#xff09; 等待审核通过&#xff08;时间不久&#xff0c;一般为半小时内&#xff09; …

Vue2高级篇

Vue高级 Vue生命周期 生命周期又称为生命周期回调函数、生命周期函数、生命周期钩子, 是Vue在运行过程中的关键时刻帮我们调用的一些指函数, 生命周期函数名字不可修改, 其中的this指向的是vm或组件实例对象. 常用的生命周期钩子: mounted: 发送ajax请求、启动定时器、绑定…

【Web安全】SQL各类注入与绕过

【Web安全】SQL各类注入与绕过 【Web安全靶场】sqli-labs-master 1-20 BASIC-Injection 【Web安全靶场】sqli-labs-master 21-37 Advanced-Injection 【Web安全靶场】sqli-labs-master 38-53 Stacked-Injections 【Web安全靶场】sqli-labs-master 54-65 Challenges 与62关二…

python并发编程:IO模型

一 IO模型 二 network IO 再说一下IO发生时涉及的对象和步骤。对于一个network IO \(这里我们以read举例\)&#xff0c;它会涉及到两个系统对象&#xff0c;一个是调用这个IO的process \(or thread\)&#xff0c;另一个就是系统内核\(kernel\)。当一个read操作发生时&#xff…

无代理方式实现VMware的迁移?详细解析

在当今数字化时代&#xff0c;数据的安全性和可用性对于企业至关重要。尤其是在VMware转变订阅策略后&#xff0c;原本永久订阅的产品转变为以年付费订阅的形式&#xff0c;导致客户不得不支付更多的费用&#xff0c;大幅增加了成本。同时&#xff0c;客户也对VMware未来发展前…

Go-gin-example 第三部分 编写一个简单的文件日志系统

文章目录 本文目标新建logging包file.go编写log文件当前目录结构 接入自定义的log功能验证功能 本文目标 在上一节中&#xff0c;我们解决了 API’s 可以任意访问的问题&#xff0c;那么我们现在还有一个问题&#xff0c;就是我们的日志&#xff0c;都是输出到控制台上的&…

k8s-kubeapps图形化管理 21

结合harbor仓库 由于kubeapps不读取hosts解析&#xff0c;因此需要添加本地仓库域名解析&#xff08;dns解析&#xff09; 更改context为全局模式 添加repo仓库 复制ca证书 添加成功 图形化部署 更新部署应用版本 再次进行部署 上传nginx 每隔十分钟会自动进行刷新 在本地仓库…

人人都写过的6个bug

大家好&#xff0c;我是知微。 程序员写bug几乎是家常便饭&#xff0c;也是我们每个人成长过程中难以避免的一部分。 为了缓解这份“尴尬”&#xff0c;今天想和大家分享一些曾经都会遇到过的bug&#xff0c;让我们一起来看看这些“经典之作”。 1、数组越界 #include <…

Python爬虫:http和https介绍及请求

HTTP和HTTPS 学习目标&#xff1a; 记忆 http、https的概念和区别记忆 浏览器发送http请求的过程记忆 http请求头的形式记忆 http响应头的形式了解 http响应状态码 1 为什么要复习http和https 在发送请求&#xff0c;获取响应的过程中 就是发送http或https的请求&#xff0c…

面试题--01

GC机制 GC机制又称垃圾回收机制&#xff0c;是Python解释器自带一种机&#xff0c;专门用来回收不可用的变量值所占用的内存空间 有三个核心&#xff0c;分别是引用计数、标记清除和分代回收 引用计数&#xff1a;一个变量值如果有一个变量名指向&#xff0c;那么在它身上就计…

DMA 链表模式(LLI)深度解析

在进行一次 DMA 读或者写的时候&#xff0c;可以配置多个链表&#xff0c;从而当一个链表的数据传输完成时&#xff0c;会跳到下一个链表的起始地址&#xff0c;并继续传输数据&#xff0c;直到链表的下一个地址为 0。如果 DMA 使能了完成中断&#xff0c;则当 DMA 发送或者接收…

c++ ponder库实现机制的理解

Ponder是一个用于C的反射库&#xff0c;它允许在运行时查询和操作类型信息。反射通常是动态语言的特性&#xff0c;但Ponder通过提供一套API&#xff0c;使得在静态类型语言C中也能实现类似的功能。这对于需要动态处理对象&#xff0c;如序列化/反序列化、脚本绑定等场景非常有…

微信小程序--注册时获取微信头像

参考官方文档&#xff1a;点击跳转 具体实现&#xff1a; wxml&#xff1a; <button class"avatarBtn" open-type"chooseAvatar" chooseavatar"onChooseAvatar"><image class"avatar" :src"avatarUrl"></…

【语音识别】- 几个主流模型 2024年2月整理

文章目录 1. Wav2Vec 2.02. Whisper3. WeNet4. Paraformer5. Flan-T51. Wav2Vec 2.0 由Facebook AI Research(FAIR)于2020年提出的在语音方向里具有一定影响力的预训练模型。 论文地址:https://arxiv.org/pdf/2006.11477.pdf 项目地址:https://github.com/pytorch/fairse…

程序计数器介绍

程序计数器是计算机处理器中的寄存器&#xff0c;它包含当前正在执行的指令的地址(位置)。当每个指令被获取&#xff0c;程序计数器的存储地址加一。在每个指令被获取之后&#xff0c;程序计数器指向顺序中的下一个指令。当计算机重启或复位时&#xff0c;程序计数器通常恢复到…

java微服务技术选型,Java学习的三个终极问题及学习路线规划

前言 在网络技术中基于浏览器的B/S结构无论在PC端还是手机端都充当着至关重要的角色。 PC端自不必说&#xff0c;手机中很多应用虽然是以APP的形式存在&#xff0c;但它采用的还是B/S结构。如今日头条、微信的朋友圈等&#xff0c;这些应用在内部封装了浏览器&#xff0c;后端…

【项目实战】高并发内存池(仿tcmalloc)

【项目实战】高并发内存池&#xff08;仿tcmalloc&#xff09; 作者&#xff1a;爱写代码的刚子 时间&#xff1a;2024.2.12 前言&#xff1a; 当前项目是实现一个高并发的内存池&#xff0c;它的原型是google的一个开源项目tcmalloc&#xff0c;tcmalloc全称 Thread-Caching M…

MySQL 8.0 架构 之 DDL日志(元数据日志)(DDL log)

文章目录 MySQL 8.0 架构 之 DDL日志&#xff08;元数据日志&#xff09;&#xff08;DDL log&#xff09;MySQLDDL日志&#xff08;元数据日志&#xff09;&#xff08;DDL log&#xff09;参考 【声明】文章仅供学习交流&#xff0c;观点代表个人&#xff0c;与任何公司无关。…

【JavaScript】将数组中的数字按照从小到大排序(sort)

如果在 sort()方法中带参&#xff0c;我们就可以自定义排序规则。具体做法如下&#xff1a; 我们可以在 sort()的参数中添加一个回调函数&#xff0c;来指定排序规则。回调函数中需要定义两个形参&#xff0c;JS将会分别使用数组中的元素作为实参去调用回调函数。 JS根据回调…