当前位置: 首页 > 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-)//就可以解析成 《…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

flow_controllers

关键点&#xff1a; 流控制器类型&#xff1a; 同步&#xff08;Sync&#xff09;&#xff1a;发布操作会阻塞&#xff0c;直到数据被确认发送。异步&#xff08;Async&#xff09;&#xff1a;发布操作非阻塞&#xff0c;数据发送由后台线程处理。纯同步&#xff08;PureSync…...

CppCon 2015 学习:REFLECTION TECHNIQUES IN C++

关于 Reflection&#xff08;反射&#xff09; 这个概念&#xff0c;总结一下&#xff1a; Reflection&#xff08;反射&#xff09;是什么&#xff1f; 反射是对类型的自我检查能力&#xff08;Introspection&#xff09; 可以查看类的成员变量、成员函数等信息。反射允许枚…...