从哪里可以建公司网站,建行官网登录入口,炒域名 网站,开江网站建设文章目录 vue3自定义指令1.什么是自定义指令#xff1f;2.注册自定义指令2.1 全局注册2.2 局部注册script setup中注册#xff1a;script中使用#xff1a; 3.钩子函数参数详解4.指令传值5.总结 常用自定义指令案例v-longpress 长按v-debounce 防抖v-thrott… 文章目录 vue3自定义指令1.什么是自定义指令2.注册自定义指令2.1 全局注册2.2 局部注册script setup中注册script中使用 3.钩子函数参数详解4.指令传值5.总结 常用自定义指令案例v-longpress 长按v-debounce 防抖v-throttle 节流v-drag 拖拽script写法对比下面script setup写法script setup写法对比上面script 写法 vue3自定义指令
除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外Vue 还允许你注册自定义的指令 (Custom Directives)。
我们已经介绍了两种在 Vue 中重用代码的方式组件和组合式函数。组件是主要的构建模块而组合式函数则侧重于有状态的逻辑。另一方面自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。
1.什么是自定义指令 内置指令 在Vue中诸如v-if、v-for、v-on等等被称之为内置指令它们都是以v-开头的我们无需注册即可在全局使用它们内置指令提供了极大的方便给我们比如v-for指令可以让我们快速循环出很多dom元素等等 自定义指令 虽然Vue已经提供了很多内置指令供我们使用但是人都是贪婪的总是不满足于现状。所以官方允许我们自定义指令自定义指令就比较灵活了我们可以使用任何名称来命名自定义指令不过我们自定义指定还是需要以v-开头比如v-focus、v-resize等等。 如项目中防抖、节流、点击复制、长按识别、dom拖拽、input 元素自动聚焦这些都可以用自定义指令去完成但让也可以封装方法但我感觉还是写成自定义指令比较方便
最后有封装好的例子代码不同写法可对比学习
2.注册自定义指令
在Vue中如果我们定义了一个组件我们需要注册它才可以使用。自定义指令也是类似的原理我们需要先注册自定义指令然后才可以使用它。
2.1 全局注册
在main.ts文件中
import { createApp } from vue;
import App from ./App.vue;
const app createApp(App);
app.directive(focus, {// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode, prevVnode) {},// 在元素被插入到 DOM 前调用beforeMount() {},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted() {},// 绑定元素的父组件更新前调用beforeUpdate() {},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated() {},// 绑定元素的父组件卸载前调用beforeUnmount() {},// 绑定元素的父组件卸载后调用unmounted() {},
});
app.mount(#app);上段代码中我们借助Vue3提供的directive方法注册了一个全局的自定义指令该方法接收两个参数指令名称、指令钩子函数对象。
钩子函数对象和组件的生命周期一样这也和Vue2中的自定义指令有着较大的区别。理解这些钩子函数也很简单我们都知道自定义指令是作用在DOM元素上那么自定义指令从绑定到DOM元素再到DOM元素发生变化等等一系列操作都对应了不同的钩子函数比如当DOM元素插入到文档中时自定义指令的mounted等钩子函数就会执行。
调用全局注册的自定义指令代码如下
input typetext v-focus我们可以在任意组件中调用它。
2.2 局部注册 由于Vue3中有script setup 和script两种写法两种写法对应的自定义指令的注册写法不太一样。 script setup中注册
script setup写法代码更加简介我一直推荐vue3用 secipt setup想明白下面的写法建议参考vue3语法糖详解setup()、script setup
script setup langts
// 在模板中启用 v-focus
const vFocus {// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode, prevVnode) {},// 在元素被插入到 DOM 前调用beforeMount() {},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted() {},// 绑定元素的父组件更新前调用beforeUpdate() {},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated() {},// 绑定元素的父组件卸载前调用beforeUnmount() {},// 绑定元素的父组件卸载后调用unmounted() {},
};
/script在Vue3中只要以小写字母v开头的驼峰命名的变量都可以作为一个自定义指令使用比如上段代码中vFocus就可以在模板中通过v-focus的指令形式使用。
script中使用
export default {setup() {/*...*/},directives: {// 在模板中启用 v-focusfocus: {// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode, prevVnode) {},// 在元素被插入到 DOM 前调用beforeMount() {},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted() {},// 绑定元素的父组件更新前调用beforeUpdate() {},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated() {},// 绑定元素的父组件卸载前调用beforeUnmount() {},// 绑定元素的父组件卸载后调用unmounted() {},}}
}3.钩子函数参数详解
参考官网文档自定义指令钩子参数
4.指令传值
我们讲解钩子函数参数时里面有一个binding参数这个参数是一个对象它里面有很多属性而这些属性中有些就是指令传的值。binding对象中的value就是。看下面代码
div classdrag v-drag:jiezhang/div
script langtsdirectives: {drag: {created(el, binding, vnode, prevVnode) {console.log(el, binding);},},},
/script结果看图
5.总结
自定义指令的用处非常多如果你领略到了它的魅力那么我相信你一定会爱上它的。Vue3和Vue2自定义指令在注册和使用上有一点不同不过原理都是一样的所以如果你有Vue2的基础学会Vue3的自定义指令简直就是信手拈来。
常用自定义指令案例
v-longpress 长按 需求当用户按下鼠标左键或移动端单指触碰并按住按钮几秒钟时视为一次长按触发对应的函数。 思路 定义一个计时器 n 秒后执行函数n作为参数。 当用户按下按钮时触发 mousedown 或touchstart 事件启动计时器。 如果 click 、 mouseup 、touchend 或 touchcancel 事件在 n 秒内被触发则清除计时器视为普通点击事件。 如果计时器没有在 n秒内清除则视为一次长按触发对应的函数。 templatebutton v-longPresschangeMsg修改message/button
/template
script setup langts
import { DirectiveBinding, ref, VNode } from vue;
const changeMsg () {console.log(长按);
};
let vLongPress {created(el: HTMLElement, binding: DirectiveBinding, vnode, prevVnode) {console.log(binding);if (typeof binding.value ! function) {const compName vNode.context.name;let warn [longpress:,]provided expression ${binding.expression} is not afunction, but has to be ;if (compName) {warn Found in component ${compName};}console.warn(warn);}// 定义变量let pressTimer null;// 定义函数处理程序// 创建计时器 1秒后执行函数 let start (e) {if (e.type click e.button ! 0) {return;}if (pressTimer null) {pressTimer setTimeout(() {// 执行函数handler();}, 2000);}};// 取消计时器let cancel () {// 检查计时器是否有值if (pressTimer ! null) {clearTimeout(pressTimer);pressTimer null;}};// 运行函数const handler (e) {// 执行传递给指令的方法binding.value(e);};// 添加事件监听器el.addEventListener(mousedown, start);el.addEventListener(touchstart, start);// 取消计时器el.addEventListener(click, cancel);el.addEventListener(mouseout, cancel);el.addEventListener(touchend, cancel);el.addEventListener(touchcancel, cancel);},
};
/scriptv-debounce 防抖 背景在开发中有时遇到要给input或者滚动条添加监听事件需要做防抖处理。 需求防止input或scroll事件在短时间内被多次触发使用防抖函数限制一定时间后触发。 思路 定义一个延迟执行的方法如果在延迟时间内再调用该方法则重新计算执行时间。 将事件绑定在传入的方法上。 templatediv{{ message }}/div!-- button v-debouncechangeMsg修改message/button --button v-debounce{ fn: changeMsg, time: 3000 }修改message/button
/template
script setup langts
import { DirectiveBinding, ref, VNode } from vue;
let message ref(123);
const changeMsg () {message.value 张三;console.log(改变messag);
};
const vDebounce {created(el: HTMLElement, binding: DirectiveBinding, vnode, prevVnode) {console.log(binding);let timer: null | number null;el.addEventListener(click, () {if (timer) {clearTimeout(timer);}timer setTimeout(() {binding.value.fn(); // value changeMsg}, binding.value.time);});},beforeMount() {},mounted() {},beforeUpdate() {},updated() {},beforeUnmount() {},unmounted() {},
};
/script
或者这两个做对比你会发现不一样运用更灵活上面说的理解更深刻
templatebutton v-debouncechangeMsg修改message/button
/template
script setup langts
import { DirectiveBinding, ref, VNode } from vue;
let message refstring(123);
const changeMsg () {message.value 张三;console.log(改变messag);
};
const vDebounce (el: HTMLElement, binding: DirectiveBinding) {let timer: null | number null;el.addEventListener(click, () {if (timer) {clearTimeout(timer);}timer setTimeout(() {binding.value(); // value changeMsg}, 1000);});
};
/script
v-throttle 节流 背景在开发中有些提交保存按钮有时候会在短时间内被点击多次这样就会多次重复请求后端接口造成数据的混乱比如立即购买按钮多次点击就会多次调用创建订单接口。 需求防止按钮在短时间内被多次点击使用节流函数限制规定时间内只能点击一次。 思路 定义一个由开关默认为开控制是否执行的方法第一次执行函数时将开关关闭在规定时间内再调用该方法则不会再次执行直至规定时间过后开关打开。 将事件绑定在 click 方法上。 templatediv{{ message }}/divbutton v-throttle{ fn: changeMsg, time: 3000 }修改message/button
/template
script setup langts
import { DirectiveBinding, ref } from vue;
let message ref(123);
1;
const changeMsg () {console.log(节流);message.value 节流;
};
let vThrottle {created(el: HTMLElement, binding: DirectiveBinding) {console.log(binding);console.log();if (typeof binding.value.fn ! function) return;el._flag true; //开关默认为开el._timer null;el.handler function () {if (!el._flag) return;//执行之后开关关闭el._flag binding.value.fn();el._flag false;if (el._timer ! null) {clearTimeout(el._timer);el._timer null;}el._timer setTimeout(() {el._flag true; //三秒后开关开启}, binding.value.time);};el.addEventListener(click, el.handler);},beforeMount() {},mounted() {},beforeUpdate() {},updated() {},beforeUnmount() {},unmounted(el: HTMLElement, binding: DirectiveBinding) {el.removeEventListener(click, el.handler);},
};
/script
v-drag 拖拽 页面中某个区域元素需要用户所以拖动注意需要拖动的元素要给position:absolute等位属性 script写法对比下面script setup写法
templatediv classdrag v-drag/div
/templatescript langts
import { defineComponent, ref } from vue;export default defineComponent({directives: {drag: {created(el, binding) {el.onmousedown function (e) {console.log(e);//计算出元素距离上边和左边的距离鼠标点击的位置-元素的位置//这个应该能理解吧var disX e.clientX - el.offsetLeft;var disY e.clientY - el.offsetTop;let l;let t;document.onmousemove function (e) {//鼠标要按住不松开移动才行松开就会触发onmouseup的事件//计算出元素移动后的位置鼠标位置-元素初始的disX/disYl e.clientX - disX;t e.clientY - disY;el.style.left l px;el.style.top t px;};document.onmouseup function (e) {document.onmousemove null;document.onmouseup null;el.style.left l px;el.style.top t px;};};},},},setup() {},
});
/scriptstyle langless scoped
.drag {width: 100px;height: 100px;background-color: pink;position: absolute;
}
/style
script setup写法对比上面script 写法
templatediv classdrag v-drag/div
/templatescript langts setup
import { ref } from vue;const vDrag {created(el, binding) {el.onmousedown function (e) {console.log(e);//计算出元素距离上边和左边的距离鼠标点击的位置-元素的位置//这个应该能理解吧var disX e.clientX - el.offsetLeft;var disY e.clientY - el.offsetTop;let l;let t;document.onmousemove function (e) {//鼠标要按住不松开移动才行松开就会触发onmouseup的事件//计算出元素移动后的位置鼠标位置-元素初始的disX/disYl e.clientX - disX;t e.clientY - disY;el.style.left l px;el.style.top t px;};document.onmouseup function (e) {document.onmousemove null;document.onmouseup null;el.style.left l px;el.style.top t px;};};},
};
/scriptstyle langless scoped
.drag {width: 100px;height: 100px;background-color: pink;position: absolute;
}
/style
