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选项进行定义,使得它们的管理更加集中和清晰。

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

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

相关文章

昂科烧录器支持BPS晶丰明源半导体的多相Buck控制器BPD93004E

芯片烧录行业领导者-昂科技术近日发布最新的烧录软件更新及新增支持的芯片型号列表&#xff0c;其中BPS晶丰明源半导体的多相Buck控制器BPD93004E已经被昂科的通用烧录平台AP8000所支持。 BPD93004E是一款多相Buck控制器&#xff0c;支持原生1~4相&#xff0c;数字方式控制&am…

科普文:一文搞懂jvm原理(二)类加载器

概叙 科普文&#xff1a;一文搞懂jvm(一)jvm概叙-CSDN博客 前面我们介绍了jvm&#xff0c;jvm主要包括两个子系统和两个组件&#xff1a; Class loader(类装载器) 子系统&#xff0c;Execution engine(执行引擎) 子系统&#xff1b;Runtime data area (运行时数据区域)组件&am…

Cambrian-1: A Fully Open, Vision-Centric Exploration of Multimodal LLMs

摘要 https://arxiv.org/pdf/2406.16860v1 我们介绍了Cambrian-1&#xff0c;这是一系列以视觉为中心的多模态大型语言模型&#xff08;MLLMs&#xff09;。尽管更强大的语言模型可以增强多模态能力&#xff0c;但视觉组件的设计选择往往没有得到充分的探索&#xff0c;并且与…

学习笔记(linux高级编程)9

void pthread_cleanup_push(void (*routine)(void *)&#xff0c; void *arg); 功能&#xff1a;注册一个线程清理函数 参数&#xff0c;routine&#xff0c;线程清理函数的入口 arg&#xff0c;清理函数的参数。 返回值&#xff0c;无 void pthread_cleanup_pop(int execute)…

Perl语言入门指南

一、绪论 1.1 Perl语言概述 1.2 Perl的特色 1.3 Perl面临的问题 1.4 Perl语言的应用领域 二、Perl语言基础 2.1 Perl语言的历史发展 2.2 Perl语言的基本语法 2.3 Perl语言的数据类型 三、Perl语言控制结构 3.1 条件语句 3.2 循环结构 3.3 函数和子程序 四、Perl语…

OpenStack开源虚拟化平台(一)

目录 一、OpenStack背景介绍&#xff08;一&#xff09;OpenStack是什么&#xff08;二&#xff09;OpenStack的主要服务 二、计算服务Nova&#xff08;一&#xff09;Nova组件介绍&#xff08;二&#xff09;Libvirt简介&#xff08;三&#xff09;Nova中的RabbitMQ解析 OpenS…

MySQL-数据操作类型的角度理解 S锁 X锁

文章目录 1、S锁和S锁互相兼容2、S锁和X锁互斥3、X锁和X锁也互斥4、X锁和S锁也互斥5、select * from account for update;6、select * from account for update nowait;7、select * from account for update skip locked; 1、S锁和S锁互相兼容 2、S锁和X锁互斥 3、X锁和X锁也互…

20240702 每日AI必读资讯

&#x1f50d;GPTPdf&#xff1a;使用类似GPT-4o的多模态LLM分析PDF文件 - 使用类似 GPT-4o 多模态模型解析 PDF 文件&#xff0c;转换为 Markdown 格式。 - 代码简洁高效&#xff0c;仅293行。 - 解析结果几乎完美包括排版、数学公式、表格、图片、图表等内容。 &#x1…

【记录】IDEA2023的激活与安装

前言&#xff1a; 记录IDEA2023的激活与安装 第一步&#xff1a;官网下载安装包&#xff1a; 下载地址&#xff1a;https://www.jetbrains.com/idea/download/other.html 这个最好选择2023版本&#xff0c;用着很nice。 安装步骤就不详解了&#xff0c;无脑下一步就可以了…

(四十七)Vue Router之路由守卫

文章目录 概念全局路由守卫全局前置守卫全局解析守卫全局后置路由守卫 独享路由守卫组件内的守卫beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave 完整的导航解析流程 上一篇&#xff1a;&#xff08;四十六&#xff09;Vue Router组件所独有的两个钩子activate、deactivat…

VLAN原理与配置

AUTHOR &#xff1a;闫小雨 DATE&#xff1a;2024-04-28 目录 VLAN的三种端口类型 VLAN原理 什么是VLAN 为什么使用VLAN VLAN的基本原理 VLAN标签 VLAN标签各字段含义如下&#xff1a; VLAN的划分方式 VLAN的划分包括如下5种方法&#xff1a; VLAN的接口链路类型 创建V…

Android system.img挂载和解除挂载

Android system.img挂载和解除挂载 解包后的super.img&#xff0c;里面最重要的是system.img文件&#xff0c;如何对system.img进行挂载和解除挂载是需要掌握的能力 基础知识 system.img、vendor.img 都存在两种格式raw,sparse &#xff0c;在ubuntu命令窗口下执行下执行&am…

深度学习之生成对抗网络 BigGAN

BigGAN(Big Generative Adversarial Networks)是生成对抗网络(GAN)的一种变体,专注于生成高质量、大尺寸的图像。BigGAN 是由 DeepMind 的研究人员于 2018 年提出的。其核心思想是通过增加模型的规模(更深的网络和更多的参数)来提高生成图像的质量,同时引入一些新的技术…

便签 Pro(Mac 智能便签工具)专业版怎么样,值得购买吗?

使用 Mac 的小伙伴平时都是怎么记录工作生活中的碎片信息&#xff1f;用聊天软件&#xff0c;还是系统备忘录呢&#xff1f; 实际体验下来&#xff0c;其实都难以称得上好用。 赶紧来了解一下 Mac 多彩思维速记工具便签 Pro&#xff01;拥有智能边框大小、iCloud 同步、历史记…

矩阵置零解题

给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]]示例 2&#xff1a; 输入&…

VUE3解决跨域问题

本文基于vue3 vite element-plus pnpm 报错&#xff1a;**** has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource. 原因&#xff1a;前端不能直接访问其他IP&#xff0c;需要用vite.config.ts &#xff0…

onvif 基本概念

media_server、device_server和event_server是三个重要的服务。 1. media_server 功能&#xff1a;media_server服务主要负责处理媒体流相关的请求&#xff0c;包括视频和音频流的传输、控制等。实现&#xff1a;该服务通常使用RTSP&#xff08;Real Time Streaming Protocol…

API-本地存储

学习目标&#xff1a; 掌握本地存储 学习内容&#xff1a; 本地存储介绍本地存储分类存储复杂数据类型 本地存储介绍&#xff1a; 以前我们页面写的数据一刷新页面就没有了&#xff0c;是不是? 随着互联网的快速发展&#xff0c;基于网页的应用越来越普遍&#xff0c;同时也…

算法基础入门 - 2.栈、队列、链表

文章目录 算法基础入门第二章 栈、队列、链表2.1 队列2.2 栈2.3 纸牌游戏2.4 链表如何建立链表?1.我们需要一个头指针(head)指向链表的初始。链表还没建立时头指针head为空2.建立第一个结点3.设置刚创建的这个结点的数据域(左半)和指针域(右半)4.设置头指针,头指针可方便…

【鸿蒙学习笔记】运算符

官方文档&#xff1a;ArkTS语言介绍 目录标题 赋值运算符比较运算符一元运算符&#xff1a;自增自减运算符二元运算符位运算符逻辑运算符 赋值运算符 运算符解释解释赋值运算符x x y加-x x - y减*x x * y乘/x x / y除%x x % y取余<<x x << y按位左移>&…