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

Vue3自定义指令(directive)

文章目录

  • 前言
  • 一、Vue3指令钩子函数
  • 二、自定义指令的两种方式
    • 1.局部使用
      • 例子1:鉴权
      • 例子2:拖拽
    • 2.全局使用
      • 例子1:监听宽高指令
      • 例子2:监听是否出现在视口
  • 总结


前言

此文章主要讲了vue3中自定义指令的使用,以及一些WebAPI的使用。如 ResizeObserver、IntersectionObserver API的使用。


一、Vue3指令钩子函数

  • created 元素初始化
  • beforeMount 指令绑定到元素后调用 只调用一次
  • mounted 元素插入父级dom调用
  • beforeUpdate 元素被更新前调用
  • updated 元素被更新后调用
  • beforeUnmount 元素移除前调用
  • unmounted 元素被移除后调用

vue2中的指令钩子函数有:

bind、inserted、update、componentUpdated、unbind

二、自定义指令的两种方式

利用Directive可以创建自定义指令

1.局部使用

接收两个参数
el:表示当前组件实例
dir:表示传入的参数以及函数

DirectiveBinding:与返回参数一致,使用来约束类型

export interface DirectiveBinding<V = any> {instance: ComponentPublicInstance | null;value: V;oldValue: V | null;arg?: string;modifiers: DirectiveModifiers;dir: ObjectDirective<any, V>;
}

使用如下:

<script setup lang="ts">
import {Directive, DirectiveBinding} from "vue";
import A from "./A.vue";
type Dir = {background:string
}
const vMove:Directive = {created(){console.log('------created-------')},beforeMount(){console.log('------beforeMount-------')},mounted(el:HTMLElement,dir:DirectiveBinding<Dir>){console.log('------mounted-------')el.style.background = dir.value.background},beforeUpdate(){console.log('------beforeUpdate-------')},updated(){console.log('------updated-------')},beforeUnmount(){console.log('------beforeUnmount-------')},unmounted(){console.log('------unmounted-------')}
}
</script><template>
<A v-move:aaa.smz="{background:'red'}"/>
</template>

例子1:鉴权

<script setup lang="ts">
import {Directive} from "vue";// 用户id
localStorage.setItem('userId','smz')
// mock后台数据
const permission = ['smz:shop:edit',// 'smz:shop:create','smz:shop:delete'
]
const userId = localStorage.getItem('userId') as string
const vHasShow:Directive<HTMLElement,string> = (el,bingding)=>{// 当后台返回的权限列表中没有对应的权限,则将其隐藏if (!permission.includes(userId+':'+bingding.value)){// 这里感觉还要对用户在控制台的操作做一些操作,防止用户直接改样式// 监听用户对改元素的操作,在改变其值时进行样式添加el.style.display = 'none'}
}
</script><template>
<div class="btns"><button v-has-show="'shop:create'">创建</button><button v-has-show="'shop:edit'">编辑</button><button v-has-show="'shop:delete'">删除</button>
</div>
</template>

例子2:拖拽

这里使用拖拽需要改变拖拽的position,因为不改变,则修改元素位置不起作用

static
该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

<script setup lang="ts">
/*** Element.firstElementChild:只读属性,返回对象第一个子元素,没有则返回Null* Element.clientX:只读属性,元素距离视口左边的距离(中心点)* Element.offsetLeft:只读属性,元素左上角距离视口左边的距离* Element.offsetWidth:元素宽度* Element.offsetHeight:元素高度* window.innerWidth:可视窗宽度* window.innerHeight:可视窗高度*/
import {Directive, DirectiveBinding} from "vue";const vDrea:Directive<any,void> = (el:HTMLElement,binding:DirectiveBinding)=>{let gap = 10let moveElement:HTMLDivElement = el.firstElementChild as HTMLDivElementconst mouseDown = (e:MouseEvent)=>{console.log(window.innerHeight)let X = e.clientX - el.offsetLeftlet Y = e.clientY - el.offsetTopconst move = (e:MouseEvent)=>{let x = e.clientX - Xlet y = e.clientY - Y//超出边界判断if (x<=gap){x = 0}if (y<=gap){y = 0}if (x>= window.innerWidth -el.offsetWidth -gap){x = window.innerWidth -el.offsetWidth}if (y>= window.innerHeight - el.offsetHeight-gap){y = window.innerHeight - el.offsetHeight}el.style.left = x + 'px'el.style.top = y + 'px'}// 鼠标移动document.addEventListener('mousemove',move)//松开鼠标document.addEventListener('mouseup',()=>{//清除移动事件document.removeEventListener('mousemove',move)})}//鼠标按下moveElement.addEventListener('mousedown',mouseDown)
}
</script><template><div v-drea class="box"><div class="header"></div><div>内容</div></div>
</template><style lang="less" scoped>
.box{position: fixed;width: 300px;height: 250px;border: solid 1px black;.header{height: 30px;background-color: black;}
}
</style>

2.全局使用

定义好全局指令文件,其中需要导出指令钩子函数

/*** el:监听的dom元素* binding: 回调事件*/
export default {mounted(el,binding) {//将dom与回调的关系塞入mapmap.set(el,binding.value)//监听el元素的变化ob.observe(el)},unmounted(el) {//取消监听ob.unobserve(el)}
}

在main.ts文件中添加以下代码
挂载指令,省略‘v-’前缀

import sizeDireect from '../src/directs/resize指令封装/sizeDireect'
app.directive('size-ob', sizeDireect)

使用:
在需要监听的标签上使用命令 v-size-ob="handle",其中handle为回调函数,其中返回的参数为尺寸信息

 <div class="dir"  v-size-ob="handle">

例子1:监听宽高指令

/*** @ResizeObserver 监听元素变化的API* @entries 元素变化的数组集合* @entry 每个被监听的元素 其中包含的属性有:*    borderBoxSize:边框盒尺寸*    contentBoxSize:内容盒尺寸*    contentRect:内容区域矩形信息 => DOMRectReadOnly {x: 0, y: 0, width: 3800, height: 3800, top: 0, …}*    devicePixelContentBoxSize:DPR尺寸*    target:哪一个元素发生变化*/
const ob = new ResizeObserver((entries)=>{for (const entry of entries) {// 获取dom元素的回调const handler = map.get(entry.target)//存在回调函数if (handler){// 将监听的值给回调函数handler({width: entry.borderBoxSize[0].inlineSize,height: entry.borderBoxSize[0].blockSize})}}
})
/*** map:存储dom与回调函数的映射关系* 使用WeakMap,防止内存溢出*/
const map = new WeakMap();
/*** el:监听的dom元素* binding: 回调事件*/
export default {mounted(el,binding) {//将dom与回调的关系塞入mapmap.set(el,binding.value)//监听el元素的变化ob.observe(el)},unmounted(el) {//取消监听ob.unobserve(el)}
}

例子2:监听是否出现在视口

vite提供了批量导入的方法 import.meta.glob
eager:true表示静态导入

let imageList: Record<string,{default: string}> = import.meta.glob('../../../assets/images/*.*',{eager:true})
let arr = Object.values(imageList).map(v=>v.default)
/*** IntersectionObserver:监听元素与视口交叉的API* 返回一个监听集合,集合每一项有intersectionRatio表示在视口存在的比例*/
export default {// @ts-ignoreasync mounted(el,binding){const def = await import('../../assets/vue.svg')el.src = def.defaultlet ob = new IntersectionObserver((entries) => {if (entries[0].intersectionRatio >0){el.src = binding.valueOf()ob.unobserve(el)}})ob.observe(el)},unmounted(el){}
}

总结

此文章主要讲了vue3中自定义指令的使用,以及一些WebAPI的使用。如 ResizeObserver、IntersectionObserver API的使用

相关文章:

Vue3自定义指令(directive)

文章目录 前言一、Vue3指令钩子函数二、自定义指令的两种方式1.局部使用例子1&#xff1a;鉴权例子2&#xff1a;拖拽 2.全局使用例子1&#xff1a;监听宽高指令例子2&#xff1a;监听是否出现在视口 总结 前言 此文章主要讲了vue3中自定义指令的使用&#xff0c;以及一些WebA…...

大数据课程L9——网站流量项目的实时业务处理代码

文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 掌握网站流量项目的SparkStreaming代码; ⚪ 掌握网站流量项目的HBaseUtil代码; ⚪ 掌握网站流量项目的MysqlUtil代码; ⚪ 掌握网站流量项目的LogBean代码; ⚪ 掌握网站流量项目的To…...

【2023最新B站评论爬虫】用python爬取上千条哔哩哔哩评论

文章目录 一、爬取目标二、展示爬取结果三、爬虫代码四、同步视频五、附完整源码 您好&#xff0c;我是 马哥python说&#xff0c;一枚10年程序猿。 一、爬取目标 之前&#xff0c;我分享过一些B站的爬虫&#xff1a; 【Python爬虫案例】用Python爬取李子柒B站视频数据 【Pyt…...

mysql设置max_sp_recursion_depth,sql_mode

mysql 中设置 @@max_sp_recursion_depth select @@max_sp_recursion_depth; 今天在mysql 写存储过程递归调用时,发现老是报错(recovery limit 0(as set by the max_sp_recursion_depth));后来百度下发现 max_sp_recursion_depth设置不对; 这个修改涉及到全局和session级修…...

论文阅读:SERE: Exploring Feature Self-relation for Self-supervised Transformer

Related Work Self-supervised 学习目的是在无人工标注的情况下通过自定制的任务&#xff08;hand-crafted pretext tasks&#xff09;学习丰富的表示。 Abstract 使用自监督学习为卷积网络&#xff08;CNN&#xff09;学习表示已经被验证对视觉任务有效。作为CNN的一种替代…...

遥感数据与作物模型同化应用:PROSAIL模型、DSSAT模型、参数敏感性分析、数据同化算法、模型耦合、精度验证等主要环节

查看原文>>>遥感数据与作物模型同化实践技术应用 基于过程的作物生长模拟模型DSSAT是现代农业系统研究的有力工具&#xff0c;可以定量描述作物生长发育和产量形成过程及其与气候因子、土壤环境、品种类型和技术措施之间的关系&#xff0c;为不同条件下作物生长发育及…...

Navicat15工具连接PostgreSQL15失败

1.错误现象及原因 错误现象&#xff1a; 错误原因&#xff1a; postgresql 15版本中 pg_database 系统表把 datlastsysoid 列删除了&#xff0c;所以造成了此错误。 2.解决方法 &#xff08;1&#xff09;将Navicat工具更新到官网最新版本。 &#xff08;2&#xff09;更换…...

开源AI家庭自动化助手-手机控制家庭智能家居服务

产品简介 将本地控制和隐私放在首位的开源家庭自动化。由全球开发者和 DIY 爱好者社区提供支持。非常适合在 Raspberry Pi 或本地服务器上运行。 功能介绍 1. 控制面板在控制面板&#xff0c;你可以查看家庭的灯光&#xff0c;温度&#xff0c;门铃&#xff0c;音响&#xf…...

解决CSS定位错乱/疑难杂症的终极绝招==》从样式污染开始排查

我们接手他人或者第三方项目的时候&#xff0c;有时候会遇到一些莫名其妙的问题&#xff1a; 明明自己的样式写的没有问题&#xff0c;但是网页上却显示的乱七八糟的&#xff0c;或者效果完全出不来。 案例如下&#xff1a; 这里只用了很典型的flex弹性布局&#xff0c;并没有…...

【笔记】《C++性能优化指南》Ch3 测量性能

【笔记】《C性能优化指南》Ch3 测量性能 1. 优化思想1.1 专业的性能测试流程1.2 优化准则1.2.1 90/10规则1.2.2 Amdahl定律 2. 进行实验2.1 记实验笔记2.2 测量基准性能并设定目标2.3 你只能改善你能够测量的 3. 分析程序执行3.1 实现分析器的方式3.2 分析器的优缺点 4. 测量长…...

2023大数据面试总结

文章目录 Flink&#xff08;SQL相关后面专题补充&#xff09;1. 把状态后端从FileSystem改为RocksDB后&#xff0c;Flink任务状态存储会发生哪些变化&#xff1f;2. Flink SQL API State TTL 的过期机制是 onCreateAndUpdate 还是 onReadAndWrite&#xff1f;3. watermark 到底…...

udev自动创建设备节点的机制

流程框图如下 自动创建 1 内核检测到设备插入后&#xff0c;会发送一个uevent事件到内核中&#xff0c;并提供有关硬件设备的信息。 2 udevd守护程序收到uevent事件后&#xff0c;创建一个设备类&#xff0c;&#xff08;向上提交目录信息&#xff09;&#xff0c;会在内核中…...

访问局域网内共享文件时报错0x80070043,找不到网络名

我是菜鸡 此篇只为分享一个我遇到的很简单的但是排查了好久的小问题。 我的网络环境是在校园网内&#xff0c; 自己的办公电脑设置了固定IP&#xff1a;10.11.128.236&#xff0c;同事电脑IP为&#xff1a;10.11.128.255 本人需要访问同事在局域网内分享的文件&#xff0c;…...

Java定时器

对于定时器的设定&#xff0c;想必大家在不少网站或者文章中见到吧&#xff0c;但是所谓的定时器如何去用Java代码来bianx呢&#xff1f;&#xff1f;感兴趣的老铁&#xff0c;可以看一下笔者这篇文章哟~~ 所谓的定时器就是闹钟&#xff01;&#xff01; 设定一个时间&#x…...

科普js加密时出现的错误

当你在使用Babel解析JavaScript代码时&#xff0c;可能会遇到一个错误信息&#xff1a;“Deleting local variable in strict mode”&#xff08;在严格模式下删除本地变量&#xff09;。这个错误信息通常表示你正在尝试删除一个使用let或const关键字声明的变量。在JavaScript的…...

MYSQL优化——B+树讲解

B-/B树看 MySQL索引结构 B-树 B-树,这里的 B 表示 balance( 平衡的意思),B-树是一种多路自平衡的搜索树.它类似普通的平衡二叉树&#xff0c;不同的一点是B-树允许每个节点有更多的子节点。下图是 B-树的简化图. B-树有如下特点: 所有键值分布在整颗树中&#xff1b; 任何一…...

Rokid Jungle--Station pro

介绍和功能开发 YodaOS-Master操作系统&#xff1a;以交换计算为核心&#xff0c;实现单目SLAM空间交互&#xff0c;具有高精度、实时性和稳定性。发布UXR2.0SDK&#xff0c;为构建空间内容提供丰富的开发套件 多模态交互 算法原子化 多种开发工具协同 多生态支持 骁龙XR2…...

如何实现微服务

一、问题拆解 1.1、客户端如何访问这些服务 原来的Monolithic方式开发&#xff0c;所有的服务都是本地的&#xff0c;UI可以直接调用&#xff1b;现在按功能拆分成独立的服务&#xff0c;跑在独立的虚拟机上的Java进程了。客户端UI如何访问他的&#xff1f; 后台有N个服务&a…...

MySQL如何进行增量备份与恢复?

目录 一、MySQL 介绍 二、增量备份 三、备份恢复 一、MySQL 介绍 MySQL是一款开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;它以其可靠性、灵活性和易于使用而备受赞誉。以下是关于MySQL数据库的介绍&#xff1a; MySQL是由瑞典公司MySQL AB开发&…...

微服务框架

一、目标 微服务框架通过组件化的方式提供微服务的开发部署、服务注册发现、服务治理与服务运维等能力。主流的微服务框架有开源的Spring Cloud、Dubbo与Service Mesh等&#xff0c;各大云厂商也基于开源的微服务框架&#xff0c;集成相关的云服务&#xff0c;实现企业级的微服…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

解析两阶段提交与三阶段提交的核心差异及MySQL实现方案

引言 在分布式系统的事务处理中&#xff0c;如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议&#xff08;2PC&#xff09;通过准备阶段与提交阶段的协调机制&#xff0c;以同步决策模式确保事务原子性。其改进版本三阶段提交协议&#xff08;3PC&#xf…...

PH热榜 | 2025-06-08

1. Thiings 标语&#xff1a;一套超过1900个免费AI生成的3D图标集合 介绍&#xff1a;Thiings是一个不断扩展的免费AI生成3D图标库&#xff0c;目前已有超过1900个图标。你可以按照主题浏览&#xff0c;生成自己的图标&#xff0c;或者下载整个图标集。所有图标都可以在个人或…...

简单介绍C++中 string与wstring

在C中&#xff0c;string和wstring是两种用于处理不同字符编码的字符串类型&#xff0c;分别基于char和wchar_t字符类型。以下是它们的详细说明和对比&#xff1a; 1. 基础定义 string 类型&#xff1a;std::string 字符类型&#xff1a;char&#xff08;通常为8位&#xff09…...

n8n:解锁自动化工作流的无限可能

在当今快节奏的数字时代&#xff0c;无论是企业还是个人&#xff0c;都渴望提高工作效率&#xff0c;减少重复性任务的繁琐操作。而 n8n&#xff0c;这个强大的开源自动化工具&#xff0c;就像一位智能的数字助手&#xff0c;悄然走进了许多人的工作和生活&#xff0c;成为提升…...