网站上传附件目录格式,销售网站建设,网页版微信登录入口密码登录,微信平台登录简介 在vue中重用代码的方式有#xff1a;组件、组合式函数。组件是主要的构建模块#xff0c;而组合式函数更偏重于有状态的逻辑。 指令系统给我们提供了例如#xff1a;v-model、v-bind#xff0c;vue系统允许我们自定义指令#xff0c;自定义指令也是一种重用代码的方式…简介 在vue中重用代码的方式有组件、组合式函数。组件是主要的构建模块而组合式函数更偏重于有状态的逻辑。 指令系统给我们提供了例如v-model、v-bindvue系统允许我们自定义指令自定义指令也是一种重用代码的方式。自定义指令常用于封装一些普通元素的Dom底层访问逻辑。
定义 一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。 自定义指令的钩子函数如下
const myDirective {// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode, prevVnode) {// 下面会介绍各个参数的细节},// 在元素被插入到 DOM 前调用beforeMount(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted(el, binding, vnode, prevVnode) {},// 绑定元素的父组件更新前调用beforeUpdate(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载前调用beforeUnmount(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载后调用unmounted(el, binding, vnode, prevVnode) {}
} 使用 下面这两个使用的例子都源自网络在原有的基础上加入了一些改动 一个小栗子使用全局自定义指令封装防抖代码段
export function preventReClick(app) {app.directive(preventReClick, {beforeMount(el, binding) {el.addEventListener(click, () {if (!el.disabled) {el.disabled truesetTimeout(() {el.disabled false}, binding.value || 3000)}})}})
}
import App from ./App.vue
import { preventReClick } from ./utils/directivebox;const app createApp(App)// 全局指令的挂载
preventReClick(app);
templatediv classbox!-- 这里必须使用el-button因为这个防抖的功能是通过控制elementPlus中的disable属性实现的 --el-button classbtn v-preventReClick clickbuttonEvent使用全局自定义指令做防抖的处理/el-button/div
/template
script setuplet clickNum 0// 使用全局自定义指令处理防抖
/*运行后可以看到在连续多次点击button时3000ms后才会打印一次这个buttonEvent中的log因为在全局自定义指令中拦截了click的事件在3000ms内组件被设置为disabled的状态*/
function buttonEvent() {clickNumconsole.log(clickNum , clickNum);
}/script
style scoped langless
.box {display: flex;flex-direction: column;.btn {padding: 20px 40px 20px 40px;background-color: aquamarine;margin-bottom: 30px;}
}
/style 一个小栗子使用局部自定义指令封装长按元素两秒的点击事件
export const longpress {created(el, binding, vNode) {// console.log(long press event 1);if (typeof binding.value ! function) {throw callback must be a function}// 定义变量let pressTimer null// 创建计时器 2秒后执行函数 let start (e) {if (e.type click e.button ! 0) {return}if (pressTimer null) {pressTimer setTimeout(() {handler()}, 2000)}}// 取消计时器let cancel (e) {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)},// 当传进来的值更新的时候触发updated(el, { value }) {el.$value value},// 指令与元素解绑的时候移除事件绑定unmounted(el) {el.removeEventListener(click, el.handler)},
}
templatediv classboxel-button classbtn v-long-presslongPressEvent使用全局自定义指令实现长按处理事件/el-button/div
/template
script setup
import { longpress } from ./utils/derective.js// 在setup语法糖中使用v打头驼峰命名的方式声明一个局部的自定义指令
const vLongPress longpress;function longPressEvent(){console.log(button的长按点击事件);
}/script
style scoped langless
.box {display: flex;flex-direction: column;.btn {padding: 20px 40px 20px 40px;background-color: aquamarine;margin-bottom: 30px;}
}
/style
小结 注意只有当所需功能只能通过直接的 DOM 操作来实现时才应该使用自定义指令。其他情况下应该尽可能地使用 v-bind 这样的内置指令来声明式地使用模板这样更高效也对服务端渲染更友好。
