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

news/2024/4/16 15:41:11/文章来源:https://blog.csdn.net/weixin_46872121/article/details/136484391

什么是指令

在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.luyixian.cn/news_show_996404.aspx

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

相关文章

【QT】自定义控件的示例

自定义控件&#xff08;很重要&#xff09; 什么是自定义控件&#xff1f; 顾名思义就是创建一个窗口&#xff0c;放入多个控件&#xff0c;拼接起来&#xff0c;一起使用。 为什么需要它&#xff1f; 需求&#xff0c;假设有100个窗口&#xff0c;那如果有两个控件同时被使…

RK 解决抖音 流行应用 摄像头画面裁剪放大

问题记录 SOC&#xff1a;RK3568 system&#xff1a;Android12 流行应用 一些APP通过打开板载摄像头出现画面裁剪 画面比例不正常或者是预览方向旋转&#xff0c;但是使用相机APP打开却不会 修改&#xff1a; hardware\interfaces\camera\device\3.4\default\RgaCropScale.…

计算机设计大赛 深度学习疫情社交安全距离检测算法 - python opencv cnn

文章目录 0 前言1 课题背景2 实现效果3 相关技术3.1 YOLOV43.2 基于 DeepSort 算法的行人跟踪 4 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习疫情社交安全距离检测算法 ** 该项目较为新颖&#xff0c;适合作为竞赛…

每周一练--[NewStarCTF 2023 公开赛道]Final

很明显又是ThinkPHP的漏洞&#xff0c;上周还做过类似的。 先看看是哪一个版本的。 得到版号后&#xff0c;去找找payload。 (post&#xff09;public/index.php?scaptcha (data) _method__construct&filter[]system&methodget&server[REQUEST_METHOD]ls -al 这其…

C# CallerMemberName、CallerFilePath、CallerLineNumber

CallerMemberName&#xff1a;调用某个方法的主方法名称 CallerFilePath&#xff1a;调用某个方法的主方法所在的类文件地址 CallerLineNumber&#xff1a;调用这个方法所在的行号 用这三个附加属性&#xff0c;需要设置默认值。

微服务系列(一)springcloudAlibaba之Nacos注册和配置中心及openFeign远程调用

一&#xff0c;认识微服务 我们先看看开发大型项目采用单体架构存在哪些问题&#xff0c;而微服务架构又是如何解决这些问题的。 1.1 单体架构 单体架构&#xff08;monolithic structure&#xff09;&#xff1a;整个项目中所有功能模块都在一个工程中开发&#xff1b;项目部署…

【Leetcoode】2917. 找出数组中的 K-or 值

文章目录 题目思路代码结果 题目 题目链接 给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。 nums 中的 K-or 是一个满足以下条件的非负整数&#xff1a; 只有在 nums 中&#xff0c;至少存在 k 个元素的第 i 位值为 1 &#xff0c;那么 K-or 中的第 i 位的值才是 1 。…

同步服务器操作系统公网仓库到本地 _ 统信UOS _ 麒麟KYLINOS

原文链接&#xff1a;同步服务器操作系统公网仓库到本地 | 统信UOS | 麒麟KYLINOS 在如今快速发展的信息技术时代&#xff0c;维护和更新服务器操作系统变得越来越重要。无论是为了提高安全性、增加新功能还是提升系统稳定性&#xff0c;同步公网源仓库到本地都是一个关键步骤。…

uniapp微信小程序开发踩坑日记:修改组件默认样式

使用uniapp官方组件的时候&#xff0c;我们常常要修改组件的默认样式&#xff0c;但是网上的很多修改组件默认样式的方法都是不生效的&#xff08;因为我都试过了&#xff09; 下面给大家介绍vue构建的uniapp小程序中能够生效的修改组件默认样式的方法 1、在编译后的代码文件…

关于 selinux 规则

1. 查看selinux状态 SELinux的状态&#xff1a; enforcing&#xff1a;强制&#xff0c;每个受限的进程都必然受限 permissive&#xff1a;允许&#xff0c;每个受限的进程违规操作不会被禁止&#xff0c;但会被记录于审计日志 disabled&#xff1a;禁用 相关命令&#xf…

java——2024-03-03

String类的对象能被修改吗&#xff1f;如果不能需要用什么修改&#xff1f;StringBuilder和StringBuffer的区别&#xff1f;equals和区别谈谈对面向对象的理解重载和重写的区别说一下ArrayList&#xff0c;LinkedList底层实现以及区别什么是哈希冲突&#xff1f;hashMap和conCu…

论文阅读:SDXL Improving Latent Diffusion Models for High-Resolution Image Synthesis

SDXL Improving Latent Diffusion Models for High-Resolution Image Synthesis 论文链接 代码链接 介绍 背景&#xff1a;Stable Diffusion在合成高分辨率图片方面表现出色&#xff0c;但是仍然需要提高本文提出了SD XL&#xff0c;使用了更大的UNet网络&#xff0c;以及增…

EasyX的学习2

消息处理——漂亮的按钮(鼠标) 用到的函数 1.消息结构体变量类型&#xff1a;使用ExMessage ExMessage msg{ 0 }; 定义一个变量名为msg的ExMessage结构体变量并初始化为0 2.获取消息函数&#xff1a;peekmessage函数 //获取消息 peekmessage(&msg, EX_MOUSE); 两个参…

vue3学习(续篇)

vue3学习(续篇) 默认有vue3基础并有一定python编程经验。 chrome浏览器安装vue.js devtools拓展。 文章目录 vue3学习(续篇)1. element-ui使用2. axios 网络请求1. 简介2. 操作 3. flask-cors解决跨域问题1. 简介2. 操作 4. 前端路由 vue-router1. 简单使用2. 配置路径别名和…

Vue2+ElementUI下拉、Select组件的封装

Vue2ElementUI下拉、Select组件的封装&#xff1a;引言 在 Vue2 项目中&#xff0c;ElementUI 的 el-select 组件是常用的下拉选择框组件。它提供了丰富的功能和样式&#xff0c;可以满足各种需求。但是&#xff0c;在实际开发中&#xff0c;我们经常会遇到一些重复性的需求&a…

RocketMQ架构详解

文章目录 概述RocketMQ架构Broker 高可用集群刷盘策略 概述 RocketMQ一个纯java、分布式、队列模型的开源消息中间件&#xff0c;前身是MetaQ&#xff0c;是阿里研发的一个队列模型的消息中间件&#xff0c;后开源给apache基金会成为了apache的顶级开源项目&#xff0c;具有高…

[Redis]——数据一致性,先操作数据库,还是先更新缓存?

目录 一、操作缓存和数据库时有三个问题需要考虑&#xff1a; 1.删除缓存还是更新缓存&#xff1f; 2.如何保证缓存与数据库的操作同时成功或失效 3.先操作缓存还是先操作数据库&#xff08;多线程并发问题&#xff09; 二、 缓存更新的最佳策略 一、操作缓存和数据库时有…

3D资产管理

3D 资产管理是指组织、跟踪、优化和分发 3D 模型和资产以用于游戏、电影、AR/VR 体验等各种应用的过程。 3D资产管理也称为3D内容管理。 随着游戏、电影、建筑、工程等行业中 3D 内容的增长&#xff0c;实施有效的资产管理工作流程对于提高生产力、减少错误、简化工作流程以及使…

2024 年适用于 Windows 和 Mac 的最佳数据恢复软件

您刚刚与朋友参加了一次难忘的告别聚会回来。您已经拍摄了数百个美好瞬间&#xff0c;并将它们保存在您的设备中&#xff0c;并渴望与您所爱的人分享。 但随后&#xff0c;您突然不小心从电脑中删除了整个相机文件夹。现在这是我们许多人面临的最严重的问题&#xff0c;因为我…

python+django高校澡堂洗浴浴室预约签到管理系统8d8c

本系统在设计过程中&#xff0c;高校洗浴管理系统的出现就有很大的需求。该系统可以很好地解决这些麻烦和问题。 很好地发挥了该开发方式的优势&#xff0c;让实现代码有了良好的可读性&#xff0c;而且使代码的更新和维护更加的方便&#xff0c;操作简单&#xff0c;对以后的维…