Vue 自定义指令
首先,我们知道vue中有很多自带指令,v-bind、v-on、v-model等。但在业务开发中,我们常见一些自定义指令如:v-copy、v-longpress等。那么如何定义自己所需的指令呢?
接下来我们分别从指令注册、指令的钩子函数、指令的参数以及常见指令的封装进行介绍。
为什么要自定义指令
在使用vue的时候 我们某些场景下仍然需要对普通 DOM 元素进行底层操作,
在vue中、组件渲染需要时间,获取DOM常需要搭配setTimeout、$nextTick使用
而自定义指令在使用时,更便捷。
指令注册
指令的注册命令:Vue.directive(key, directives[key])
使用:Vue.use()
全局注册
在我们常见的项目结构中、directives文件夹下,定义的index.js文件中,我们会对指令进行全局注册。
import MyDirective from './directive/myDirective'
const directives = { MyDirective
}
export default { install(app) {// 遍历、注册Object.keys(directives).forEach((key) => { app.directive(key, directives[key]) })}
}
局部注册
在你自己组件或页面中,使用directives选项自定义指令
export default {directives: {myDirective: {inserted: function (el) {//}}}
}
使用
<input v-myDirective>
添加参数
v-myDirective="data"
传递数值给指令,这里的data可以是组件中的data数据,也可以是methods方法。
<div v-myDirective="{ color: 'white', text: 'hello!' }"></div>app.directive('myDirective', (el, binding) => {console.log(binding.value.color) // => "white"console.log(binding.value.text) // => "hello!"
})
v-myDirective:click="clickHandle"
,传递参数click,这里可以通过[xx]的格式动态传递参数。
v-myDirective:click.top.bar="clickHandle"
传递修饰符top和bar。
注意:不推荐在组件上使用自定义指令、它会应用于组件的根结点、和透传 attributes 类似。
指令的钩子和参数
const myDirective = {// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode) {// 下面会介绍各个参数的细节},// 在元素被插入到 DOM 前调用beforeMount(el, binding, vnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted(el, binding, vnode) {},// 绑定元素的父组件更新前调用beforeUpdate(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载前调用beforeUnmount(el, binding, vnode) {},// 绑定元素的父组件卸载后调用unmounted(el, binding, vnode) {}
}
- bind: 只调用一次,指令第一次绑定到HTML元素时调用,可以定义一个在绑定时执行一次的初始化动作,此时获取父节点为null。
bind: function (el, {value:{fn,time}}) {}
el:指令绑定的元素、用来操作DOM
value:指令的绑定值 - inserted: 被绑定元素插入父节点时调用,此时可以获取到父节点。
- update: 所在组件的VNode更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
- componentUpdated: 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind: 只调用一次, 指令与元素解绑时调用。
常见指令的封装
v-copy
内容复制到剪切板中
const copy = {bind(el, { value }) {el.$value = valueel.handler = () => {if (!el.$value) {// 值为空的时候,给出提示。可根据项目UI仔细设计console.log('无复制内容')return}// 动态创建 textarea 标签const textarea = document.createElement('textarea')// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域textarea.readOnly = 'readonly'textarea.style.position = 'absolute'textarea.style.left = '-9999px'// 将要 copy 的值赋给 textarea 标签的 value 属性textarea.value = el.$value// 将 textarea 插入到 body 中document.body.appendChild(textarea)// 选中值并复制textarea.select()const result = document.execCommand('Copy')if (result) {console.log('复制成功') }document.body.removeChild(textarea)}// 绑定点击事件el.addEventListener('click', el.handler)},// 当传进来的值更新的时候触发componentUpdated(el, { value }) {el.$value = value},// 指令与元素解绑的时候,移除事件绑定unbind(el) {el.removeEventListener('click', el.handler)},
}export default copy
v-longpress
实现一个用户长按鼠标左键或移动端单指长按,触发的事件
const longpress = {bind(el, binding) {if (typeof binding.value!== 'function') {throw new Error('Callback must be a function');}let pressTimer = null;// 鼠标(左键)按下、移动端按下 且 按下持续时间超过 1s 时,触发const start = (e) => {if ((e.type === 'mousedown' && e.button!== 0) ||(e.type === 'touchstart' && e.touches.length > 1)) {return;}pressTimer = setTimeout(() => {binding.value(e);}, 1000);};// 鼠标(左键)抬起、移动端抬起 或 按下时间小于 1s 时,移除定时器const cancel = () => {if (pressTimer!== null) {clearTimeout(pressTimer);pressTimer = null;}};// 事件监听el.addEventListener('mousedown', start);el.addEventListener('touchstart', start);el.addEventListener('click', cancel);el.addEventListener('mouseout', cancel);el.addEventListener('touchend', cancel);el.addEventListener('touchcancel', cancel);},// 指令与元素解绑的时候,移除事件绑定unbind(el) {el.removeEventListener('mousedown', start);el.removeEventListener('touchstart', start);el.removeEventListener('click', cancel);el.removeEventListener('mouseout', cancel);el.removeEventListener('touchend', cancel);el.removeEventListener('touchcancel', cancel);},
};export default longpress
v-waterMarker
页面增加水印
function addWaterMarker(str, parentNode, font, textColor) {// 水印文字,父元素,字体,文字颜色var can = document.createElement('canvas')parentNode.appendChild(can)can.width = 200can.height = 150can.style.display = 'none'var cans = can.getContext('2d')cans.rotate((-20 * Math.PI) / 180)cans.font = font || '16px Microsoft JhengHei'cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'cans.textAlign = 'left'cans.textBaseline = 'Middle'cans.fillText(str, can.width / 10, can.height / 2)parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}const waterMarker = {bind: function (el, binding) {addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)},
}export default waterMarker
相关文章:
Vue 自定义指令
首先,我们知道vue中有很多自带指令,v-bind、v-on、v-model等。但在业务开发中,我们常见一些自定义指令如:v-copy、v-longpress等。那么如何定义自己所需的指令呢? 接下来我们分别从指令注册、指令的钩子函数、指令的参…...
JAVA-制作小游戏期末实训
源码 import game.frame.Frame;public class App {public static void main(String[] args) {System.out.println("starting......");new Frame();} } package game.controller;import game.model.Enemy;public class EnemyController implements Runnable{private…...
【Vue教程】使用Vite快速搭建前端工程化项目 | Vue3 | Vite | Node.js
🙋大家好!我是毛毛张! 🌈个人首页: 神马都会亿点点的毛毛张 🚩今天毛毛张分享的是关于如何快速🏃♂️搭建一个前端工程化的项目的环境搭建以及流程🌠 文章目录 1.前端工程化环境搭建&#…...
4.CSS文本属性
4.1文本颜色 div { color:red; } 属性值预定义的颜色值red、green、blue、pink十六进制#FF0000,#FF6600,#29D794RGB代码rgb(255,0,0)或rgb(100%,0%,0%) 4.2对齐文本 text-align 属性用于设置元素内文本内容的水平对齐方式。 div{ text-align:center; } 属性值解释left左对齐ri…...
【工具整理】WIN换MAC机器使用工具整理
最近公司电脑升级,研发同学统一更换了 Mac Book Pro 笔记版电脑,整理一下安装了那些软件以及出处,分享记录下~ 知识库工具 1、语雀 网址:语雀,为每一个人提供优秀的文档和知识库工具 语雀 个人花园&…...
Elasticsearch向量检索需要的数据集以及768维向量生成
Elasticsearch8.17.0在mac上的安装 Kibana8.17.0在mac上的安装 Elasticsearch检索方案之一:使用fromsize实现分页 快速掌握Elasticsearch检索之二:滚动查询(scrool)获取全量数据(golang) Elasticsearch检索之三:官方推荐方案search_after…...
《小型支付商城系统》项目(一)DDD架构入门
目录 1.DDD架构 1.1充血模型 1.2领域模型 1.2.1实体 1.2.2值对象 1.2.3聚合 1.2.4领域服务 1.2.5工厂 1.2.6仓储(Repository) 2.DDD建模 3.DDD工程模型 项目介绍:知识星球 | 深度连接铁杆粉丝,运营高品质社群ÿ…...
web课程设计--酷鲨商城-springboot和vue
文章目录 页面截图技术分析数据库代码地址 页面截图 登陆页面: 分类列表 添加分类 轮播图列表 添加轮播图 商品列表 添加商品信息 技术分析 前端使用 html页面的 vue.js(vue2)和element-ui绘制前端界面 后台使用Springbootmybatis来实现crud。还有一…...
解决virtualbox克隆ubuntu虚拟机之后IP重复的问题
找遍了国内论坛,没一个能解决该问题的,所以我自己写个文章吧,真讨厌那些只会搬运的,污染国内论坛环境,搜一个问题,千篇一律。 问题 操作系统版本为"Ubuntu 24.04 LTS" lennytest1:~$ cat /etc…...
活动预告 |【Part1】Microsoft Azure 在线技术公开课:使用 Azure DevOps 和 GitHub 加速开发
课程介绍 通过 Microsoft Learn 免费参加 Microsoft Azure 在线技术公开课,掌握创造新机遇所需的技能,加快对 Microsoft Cloud 技术的了解。参加我们举办的“使用 Azure DevOps 和 GitHub 加速开发”活动,了解迁移到 DevOps 所需的合适工具和…...
SpiderFlow平台v0.5.0之数据库连接
一、寻找lib目录安装方式 在 SpiderFlow 平台中,连接数据库时需要指定数据库的 DriverClassName,并确保正确配置数据库驱动。通常,驱动文件(JAR 文件)需要放置在指定的文件夹中,以便 SpiderFlow 可以找到并…...
springboot集成阿里云短信服务
springboot集成阿里云短信服务 一.阿里云账号准备 流程:注册阿里云账号>短信服务>新增资质>新建签名>新建模版>申请秘钥>用代码测试 1.注册阿里云账号 2、登录成功后, ① 在首页搜索短信服务 ② 打开第一个搜索结果 ③ 免费开通 ④ 可以根据…...
Redis 实战篇 ——《黑马点评》(上)
《引言》 在进行了前面关于 Redis 基础篇及其客户端的学习之后,开始着手进行实战篇的学习。因内容很多,所以将会分为【 上 中 下 】三篇记录学习的内容与在学习的过程中解决问题的方法。Redis 实战篇的内容我写的很详细,为了能写的更好也付出…...
Redis的生态系统和社区支持
Redis的生态系统和社区支持 1. Redis 生态系统 1.1 Redis核心 Redis 是一个高性能的内存存储系统,支持丰富的数据结构(如字符串、列表、集合、哈希和有序集合)。它的核心提供了: 高性能数据存储:单线程模型支持每秒数百万级别的操作。多种数据结构:适用于多样化场景,如…...
基于C语言从0开始手撸MQTT协议代码连接标准的MQTT服务器,完成数据上传和命令下发响应(华为云IOT服务器)
文章目录 一、前言二、搭建开发环境三、网络编程基础概念科普3.1 什么是网络编程3.2 TCP 和 UDP协议介绍3.3 TCP通信的实现过程 四、Windows下的网络编程相关API介绍4.1 常用的函数介绍4.2 函数参数介绍4.3 编写代码体验网络编程 五、访问华为云IOT服务器创建一个产品和设备5.2…...
什么是 GPT?Transformer 工作原理的动画展示
大家读完觉得有意义记得关注和点赞!!! 目录 1 图解 “Generative Pre-trained Transformer”(GPT) 1.1 Generative:生成式 1.1.1 可视化 1.1.2 生成式 vs. 判别式(译注) 1.2 Pr…...
IDEA 编辑器自动识别 Dockerfile 类型高亮和语法提示
在 IDEA 中,如果项目里面的只有一个 Dockerfile文件时,那么此时使用打开这个文件都是 ok 的,支持语法高亮和关键词提示。 如果我们有多个 Dockerfile 时, 比如 A_Dockerfile , B_Dockerfile , C_Dockerfile, 这个时候你会发现 IDE…...
AI知识库与用户行为分析:优化用户体验的深度洞察
在当今数字化时代,用户体验(UX)已成为衡量产品成功与否的关键指标之一。AI知识库作为智能客服系统的重要组成部分,不仅为用户提供快速、准确的信息检索服务,还通过用户行为分析,为产品优化提供了深度洞察。…...
什么是Redis哨兵机制?
大家好,我是锋哥。今天分享关于【什么是Redis哨兵机制?】面试题。希望对大家有帮助; 什么是Redis哨兵机制? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Redis 哨兵(Sentinel)机制是 Redis 提…...
JavaScript中如何创建对象
在JavaScript中,创建对象有多种方法。以下是几种常见的方式: 1. 对象字面量 这是最直接和常用的创建对象的方法。使用花括号 {} 包围一组键值对来定义一个对象。 let person {name: "John",age: 30,greet: function() {console.log("…...
2025:OpenAI的“七十二变”?
朋友们,准备好迎接AI的狂欢了吗?🚀 是不是跟我一样,每天醒来的第一件事就是看看AI领域又有什么新动向? 尤其是那个名字如雷贯耳的 OpenAI,简直就是AI界的弄潮儿,一举一动都牵动着我们这些“AI发…...
Mysql(MGR)和ProxySQL搭建部署-Kubernetes版本
一、Mysql(MGR) 1.1 statefulSet.yaml apiVersion: apps/v1 kind: StatefulSet metadata:labels:app: mysqlname: mysqlnamespace: yihuazt spec:replicas: 3serviceName: mysql-headlessselector:matchLabels:app: mysqltemplate:metadata:labels:app: mysqlspec:affinity:p…...
uni-app 多平台分享实现指南
uni-app 多平台分享实现指南 在移动应用开发中,分享功能是一个非常常见的需求,尤其是在社交媒体、营销活动等场景中。使用 uni-app 进行多平台开发时,可以通过一套代码实现跨平台的分享功能,涵盖微信小程序、H5、App 等多个平台。…...
Windows系统下载、部署Node.js与npm环境的方法
本文介绍在Windows电脑中,下载、安装并配置Node.js环境与npm包管理工具的方法。 Node.js是一个基于Chrome V8引擎的JavaScript运行时环境,其允许开发者使用JavaScript编写命令行工具和服务器端脚本。而npm(Node Package Manager)则…...
Typora 最新版本下载安装教程(附详细图文)
文章简介 在当今快节奏的信息化时代,简洁高效的写作工具成为了每位内容创作者的必需品。而Typora,这款备受推崇的 Markdown 编辑器,正是为此而生。它采用无缝设计,去除了模式切换、预览窗口等干扰,带来真正的实时预览…...
将一个变量声明为全局变量比如:flag1=false;然后通过jQuery使用js一个方法,将它设置为不可修改
方法 1:使用 Object.defineProperty 通过 Object.defineProperty 将全局变量设置为只读属性。 // 声明全局变量 var flag1 false;// 使用 Object.defineProperty 将其设置为不可修改 Object.defineProperty(window, flag1, {configurable: false, // 不允许删除属…...
找不到qt5core.dll无法运用软件的解决办法
在运行某些软件或游戏时,部分用户会遇到电脑显示由于找不到qt5core.dll,无法继续执行代码的问题,下面就给大家分享几种简单的解决方法,轻松恢复软件正常运行。 导致qt5core.dll缺失的原因 qt5core.dll是 Qt 应用程序框架的一部分…...
集线器,交换机,路由器,mac地址和ip地址知识记录总结
一篇很不错的视频简介 基本功能 从使用方面来说,都是为了网络传输的标识,和机器确定访问对象 集线器、交换机和路由器 常听到路由器和集线器,下面是区别: 集线器 集线器:一个简单的物理扩展接口数量的物理硬件。…...
Javascript算法——回溯算法(组合问题)
相关资料来自《代码随想录》,版权归原作者所有,只是学习记录 回溯 回溯模板 void backtracking(参数) {if (终止条件) {存放结果;return;}for (选择:本层集合中元素(树中节点孩子的数量就是集合的大小)) {处理节点…...
【人工智能机器学习基础篇】——深入详解无监督学习之聚类,理解K-Means、层次聚类、数据分组和分类
深入详解无监督学习之聚类:如K-Means、层次聚类,理解数据分组和分类 无监督学习是机器学习中的一个重要分支,旨在从未标注的数据中发现潜在的结构和模式。聚类(Clustering)作为无监督学习的核心任务之一,广…...
从0到机器视觉工程师(二):封装调用静态库和动态库
目录 静态库 编写静态库 使用静态库 方案一 方案二 动态库 编写动态库 使用动态库 方案一 方案二 方案三 总结 静态库 静态库是在编译时将库的代码合并到最终可执行程序中的库。静态库的优势是在编译时将所有代码包含在程序中,可以使程序独立运行&…...
Mybatis的set标签,动态SQL
set标签常用于update语句中,搭配if标签使用 set标签的作用 1、会动态加上前置set关键字 2、可以删除无关的逗号 示例代码: <update id"update">update employee<set><if test"name ! null">name #{name},<…...
机器学习-感知机-神经网络-激活函数-正反向传播-梯度消失-dropout
文章目录 感知机工作流程 神经网络区别各种各样的神经网络 激活函数激活函数类型Sigmoid 函数ReLU函数Leaky ReLU 函数Tanh 函数 正向传播反向传播梯度消失(gradient vanish)如何解决 Dropout使用 PyTorch实战神经网络算法(手写MNIST数字识别)viewsoftmax和log-softmaxcross-en…...
HTML5 时间选择器详解
HTML5 的时间选择器(Time Picker)允许用户通过图形界面选择时间。它通过设置 <input> 元素的 type 属性为 time 来实现。以下是关于 HTML5 时间选择器的详细讲解。 HTML5 时间选择器详解 1. 基本用法 要创建一个时间选择器,只需使用…...
SSM-Spring-AOP
目录 1 AOP实现步骤(以前打印当前系统的时间为例) 2 AOP工作流程 3 AOP核心概念 4 AOP配置管理 4-1 AOP切入点表达式 4-1-1 语法格式 4-1-2 通配符 4-2 AOP通知类型 五种通知类型 AOP通知获取数据 获取参数 获取返回值 获取异常 总结 5 …...
小红书笔记详情API分析及读取深度探讨
一、引言 随着社交电商的蓬勃发展,小红书凭借其独特的社区氛围和强大的内容生产能力,吸引了大量用户和开发者。对于开发者而言,小红书提供的API接口是获取其丰富内容的重要途径。本文将对小红书笔记详情API进行深入分析,并详细阐…...
【Yarn】通过JMX采集yarn相关指标的Flink任务核心逻辑
通过JMX采集yarn相关指标的Flink任务核心逻辑 文章目录 通过JMX采集yarn相关指标的Flink任务核心逻辑通过jmx接口查询Yarn队列指标请求JMX配置项核心处理流程输出到kafka格式通过jmx接口查询ResourceManager核心指标请求JMX读取配置yaml配置文件核心处理逻辑输出Kafka格式彩蛋 …...
【网络安全】PostMessage:分析JS实现XSS
前言 PostMessage是一个用于在网页间安全地发送消息的浏览器 API。它允许不同的窗口(例如,来自同一域名下的不同页面或者不同域名下的跨域页面)进行通信,而无需通过服务器。通常情况下,它用于实现跨文档消息传递&…...
基于springboot的码头船只货柜管理系统 P10078
项目说明 本号所发布的项目均由我部署运行验证,可保证项目系统正常运行,以及提供完整源码。 如需要远程部署/定制/讲解系统,可以联系我。定制项目未经同意不会上传! 项目源码获取方式放在文章末尾处 注:项目仅供学…...
SpringMVC(二)原理
目录 一、配置Maven(为了提升速度) 二、流程&&原理 SpringMVC中心控制器 完整流程: 一、配置Maven(为了提升速度) 在SpringMVC(一)配置-CSDN博客的配置中,导入Maven会非…...
计算机网络:网络层知识点及习题(一)
网课资源: 湖科大教书匠 1、概述 网络层实现主机到主机的传输,主要有分组转发和路由选择两大功能 路由选择处理机得出路由表,路由表再生成转发表,从而实现分组从不同的端口转发 网络层向上层提供的两种服务:面向连接…...
题解:A. Noldbach Problem
问题描述 Nick 对素数非常感兴趣。他阅读了有关 Goldbach Problem 的内容,了解到每个大于 2 的偶数都可以表示为两个素数的和。于是他决定创造一个新问题,称为 Noldbach Problem。 Noldbach 问题的定义如下: 如果一个素数 $p$ 满足&#x…...
ESP32S3 + IDF 5.2.2 扫描WiFi
ESP32S3 IDF 5.2.2 扫描WiFi 目录 1 资料 2 通过Wi-Fi库扫描附近的网络 2.1 通过idf命令创建工程 2.2 编写测试用例 2.3 优化测试用例 3 小结 1 资料 在ESP平台基于IDF开发WiFi相关功能,主要就是基于IDF的Wi-Fi库进行二次开发。可供参考的官方资料ÿ…...
鸿蒙开发汇总
写在前面 汇总贴,整理在开发过程中遇到的有趣的、不太好解决的问题,记录一下思考的过程及自己的解决方案。 只做为技术分享,转载请标明出处。 ArkTs-this指向问题 ArkTs-Text组件长度计算不对的问题...
PDF阅读和编辑工具——xodo
本文给大家推荐一款好用的PDF阅读和编辑工具——xodo,一款免费的跨平台PDF阅读、编辑、批注工具。 注意xodo PDF Reader是免费的,xodo PDF Studio是收费的,但是xodo PDF Studio功能多很多。...
QT-------------自定义插件和库
以下是一个使用 Qt 实现图表交互操作的示例,涵盖了自定义图表视图类、不同类型的柱状图和饼图等内容。 实现思路 自定义图表视图类:创建一个从 QChartView 派生的自定义类,用于处理图表的交互操作。主窗口设计初始化:在主窗口中…...
《云原生安全攻防》-- K8s安全配置:CIS安全基准与kube-bench工具
在本节课程中,我们来了解一下K8s集群的安全配置,通过对CIS安全基准和kube-bench工具的介绍,可以快速发现K8s集群中不符合最佳实践的配置项,及时进行修复,从而来提高集群的安全性。 在这个课程中,我们将学习…...
PCA降维算法详细推导
关于一个小小的PCA的推导 文章目录 关于一个小小的PCA的推导1 谱分解 (spectral decomposition)2 奇异矩阵(singular matrix)3 酉相似(unitary similarity)4 酉矩阵5 共轭变换6 酉等价7 矩阵的迹的计算以及PCA算法推导8 幂等矩阵(idempotent matrix)9 Von Neumanns 迹不等式 [w…...
C++ 基础思维导图(一)
目录 1、C基础 IO流 namespace 引用、const inline、函数参数 重载 2、类和对象 类举例 3、 内存管理 new/delete 对象内存分布 内存泄漏 4、继承 继承权限 继承中的构造与析构 菱形继承 1、C基础 IO流 #include <iostream> #include <iomanip> //…...
Excel文件恢复教程:快速找回丢失数据!
Excel文件恢复位置在哪里? Excel是微软开发的电子表格软件,它为处理数据和组织工作提供了便捷。虽然数据丢失的问题在数字时代已经司空见惯,但对于某些用户来说,恢复未保存/删除/丢失的Excel文件可能会很困难,更不用说…...