当前位置: 首页 > news >正文

vue3中的自定义指令

全局自定义指令

假设我们要创建一个全局指令v-highlight,用于高亮显示元素。这个指令将接受一个颜色参数,并有一个可选的修饰符bold来决定是否加粗文本。

首先,在创建Vue应用时定义这个指令:(这里可以将指令抽离成单独的方法,在app.js中调用

<template><div><p v-flash="'This is a flash message!'" duration="3000"></p></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue';// 定义局部指令
const vFlash = {mounted(el, binding) {let timeoutId;// 获取持续时间,默认为2000毫秒const duration = binding.value.duration || 2000;// 显示元素el.style.opacity = 1;// 设置定时器,用于在指定时间后隐藏元素timeoutId = setTimeout(() => {el.style.opacity = 0;setTimeout(() => {el.style.display = 'none';}, 300); // 添加一点过渡时间}, duration);// 清除定时器的函数const cleanup = () => clearTimeout(timeoutId);// 组件卸载时清除定时器onUnmounted(cleanup);}
};// 在当前组件中注册局部指令
defineOptions({ directives: {flash: vFlash}
});
</script>

接下来,在你的组件中使用这个自定义指令:

<template><button v-tooltip="'这是一个提示信息!'">悬停我查看提示</button>
</template>

在这个例子中,我们定义了一个v-highlight指令,它接受一个颜色参数(如'lightblue''green'),并且通过检查bold修饰符来决定是否加粗文本。在组件模板中,我们通过v-highlight="'color'"来指定颜色,并通过添加:bold修饰符来应用加粗效果。

这样,你就能够更灵活地控制和定制组件的样式和行为,充分利用Vue 3自定义指令的强大功能。

局部自定义指令

假设我们要在一个组件内部创建一个指令v-warn,该指令将文本颜色设置为橙色,并根据提供的修饰符改变文本的装饰(如加下划线)。

<template><div><p v-flash="'This is a flash message!'" duration="3000"></p></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue';// 定义局部指令
const vFlash = {mounted(el, binding) {let timeoutId;// 获取持续时间,默认为2000毫秒const duration = binding.value.duration || 2000;// 显示元素el.style.opacity = 1;// 设置定时器,用于在指定时间后隐藏元素timeoutId = setTimeout(() => {el.style.opacity = 0;setTimeout(() => {el.style.display = 'none';}, 300); // 添加一点过渡时间}, duration);// 清除定时器的函数const cleanup = () => clearTimeout(timeoutId);// 组件卸载时清除定时器onUnmounted(cleanup);}
};// 在当前组件中注册局部指令
defineOptions({ directives: {flash: vFlash}
});
</script>

在这个组件中,我们定义了一个名为warn的局部指令。该指令在元素被挂载时执行,将文本颜色设置为橙色。如果使用了.underline修饰符,则还会给文本添加下划线。

使用局部指令

在组件的模板中,我们通过v-warn来应用这个指令,并且通过添加.modifierName的方式来使用修饰符。例如,v-warn.underline就表示应用warn指令并启用underline修饰符。

总结

局部自定义指令为组件提供了一种方式,使其能够拥有自己的特定逻辑来处理元素,而不影响其他组件。通过这种方式,你可以针对组件内部的特定需求定制行为,保持代码的模块化和组件的独立性。在Vue 3中,局部指令通过组件的directives选项进行定义,使得它们的管理更加集中和清晰。

相关文章:

vue3中的自定义指令

全局自定义指令 假设我们要创建一个全局指令v-highlight&#xff0c;用于高亮显示元素。这个指令将接受一个颜色参数&#xff0c;并有一个可选的修饰符bold来决定是否加粗文本。 首先&#xff0c;在创建Vue应用时定义这个指令&#xff1a;&#xff08;这里可以将指令抽离成单…...

Postman接口测试工具的原理及应用详解(一)

本系列文章简介&#xff1a; 在当今软件开发的世界中&#xff0c;接口测试作为保证软件质量的重要一环&#xff0c;其重要性不言而喻。随着前后端分离开发模式的普及&#xff0c;接口测试已成为连接前后端开发的桥梁&#xff0c;确保前后端之间的数据交互准确无误。在这样的背景…...

C++ initializer_list类型推导

目录 initializer_list C自动类型推断 auto typeid decltype initializer_list<T> C支持统一初始化{ }&#xff0c;出现了一个新的类型initializer_list<T>&#xff0c;一切类型都可以用列表初始化。提供了一种更加灵活、安全和明确的方式来初始化对象。 class…...

造一个交互式3D火山数据可视化

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 使用 Plotly.js 创建交互式 3D 火山数据可视化 应用场景 本代码用于将火山数据库中的数据可视化&#xff0c;展示火山的高度、类型和状态。可用于地质学研究、教育和数据探索。 基本功能 该代码使用 Plotly…...

【网络安全】一文带你了解什么是【CSRF攻击】

CSRF&#xff08;Cross-Site Request Forgery&#xff0c;跨站请求伪造&#xff09;是一种网络攻击方式&#xff0c;它利用已认证用户在受信任网站上的身份&#xff0c;诱使用户在不知情的情况下执行恶意操作。具体来说&#xff0c;攻击者通过各种方式&#xff08;如发送恶意链…...

短视频电商源码如何选择

在数字时代的浪潮下&#xff0c;短视频电商以其直观、生动、互动性强的特点&#xff0c;迅速崛起成为电商行业的一股新势力。对于有志于进军短视频电商领域的创业者来说&#xff0c;选择一款合适的短视频电商源码至关重要。本文将从多个角度探讨如何选择短视频电商源码&#xf…...

444444

356前期...

初识LangChain的快速入门指南

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…...

OpenBayes 教程上新 | CVPR 获奖项目,BioCLlP 快速识别生物种类,再也不会弄混小浣熊和小熊猫了!

市面上有很多植物识别的 App&#xff0c;通过对植物的叶片、花朵、果实等特征进行准确的识别&#xff0c;从而确定植物的种类、名称。但动物识别的 App 却十分有限&#xff0c;这使我们很难区分一些外形相似的动物&#xff0c;例如小浣熊和小熊猫。 左侧为小浣熊&#xff0c;右…...

24 年程序员各岗位薪资待遇汇总(最新)

大家好&#xff0c;我是程序员鱼皮。今天分享 24 年 6 月最新的程序员各岗位薪资待遇汇总。 数据是从哪儿来的呢&#xff1f;其实很简单&#xff0c;BOSS 直聘上有一个免费的薪酬查询工具&#xff0c;只要认证成为招聘者就能直接看&#xff0c;便于招聘者了解市场&#xff0c;…...

Android SurfaceFlinger——系统动画服务启动(十四)

在了解了 SurfaceFlinger、HWC、OpenGL ES 和 EGL 等相关概念和基础信息后,我们通过系统动画的调用流程引入更多的内容。 一、解析init.rc 开机就启动进程,肯定就要从 rc 文件开始。负责开机动画的进程是 bootanimation。 1、bootanim.rc 源码位置:/frameworks/base/cmds…...

VaRest插件常用节点以及Http请求数据

1.解析json &#xff08;1&#xff09;Construct Json Object&#xff1a;构建json对象 &#xff08;2&#xff09;Decode Json&#xff1a;解析json 将string转换为json &#xff08;3&#xff09;Encode json&#xff1a;将json转换为string &#xff08;4&#xff09;Get S…...

【Linux】线程id与互斥(线程三)

上一期我们进行了线程控制的了解与相关操作&#xff0c;但是仍旧有一些问题没有解决 本章第一阶段就是解决tid的问题&#xff0c;第二阶段是进行模拟一个简易线程库&#xff08;为了加深对于C库封装linux原生线程的理解&#xff09;&#xff0c;第三阶段就是互斥。 目录 线程id…...

JavaEE—什么是服务器?以及Tomcat安装到如何集成到IDEA中?

目录 ▐ 前言 ▐ JavaEE是指什么? ▐ 什么是服务器&#xff1f; ▐ Tomcat安装教程 * 修改服务端口号 ▐ 将Tomcat集成到IDEA中 ▐ 测试 ▐ 结语 ▐ 前言 至此&#xff0c;这半年来我已经完成了JavaSE&#xff0c;Mysql数据库&#xff0c;以及Web前端知识的学习了&am…...

主流分布式消息中间件RabbitMQ、RocketMQ

分布式消息中间件在现代分布式系统中起着至关重要的作用。以下是一些主流的分布式消息中间件&#xff1a; 1. Apache Kafka - 特点&#xff1a;高吞吐量、低延迟、持久化、水平可扩展、分布式日志系统。 - 使用场景&#xff1a;日志收集与处理、实时流处理、事件驱动架构、大数…...

【Unity Linux】模型导致的Unity项目崩溃

模型需勾选Strip Bones。如不勾选&#xff0c;则开启项目崩溃。 也可以删除有问题模型的.meta文件。 &#xff08;Unity默认会自动勾选&#xff0c;所以不会崩溃&#xff09; 或打开.meta文件&#xff0c;将optimizeBones的值&#xff0c;由0改为1。&#xff08;对应面板上的…...

22222

12212...

大数据领域的常用开发语言详解

大数据开发语言主要包括以下几个&#xff0c;以下是它们在大数据开发领域的优缺点和应用场景的详细说明&#xff1a; 1. Java 优点&#xff1a; 跨平台性&#xff1a;Java的“一次编写&#xff0c;到处运行”的特性使得其可以轻松地运行在多个操作系统上。面向对象&#xff…...

SpringBoot设置自动跳转前端界面

一般情况下&#xff0c;我们的Application启动文件的内容为一行的运行代码&#xff0c;默认启动项目以后不会自动跳转到我们的前端页面 public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args);} 这里我的可以通过设置文件的内容&#…...

vue3前端解析大数据返给的数据格式

# xxx&#xff1a;111111111111111\n\n## 2222&#xff1a;\n- 99999999。\n- 564566556。\n- ", npm install marked import {marked} from markedmarked(# xxx&#xff1a;111111111111111\n\n## 2222&#xff1a;\n- 99999999。\n- 564566556。\n-)//就可以解析成 《…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...