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

vue3 实现自定义指令封装 --- 通俗易懂

news 2025/8/2 21:27:49

1、局部自定义指令

1.1 在<script setup>定义组件内的指令，任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令

<template><div><h3>使用自定义指令</h3><div>########################## start 局部自定义指令</div><div>我是一个input：<input type="text" v-myFocus /></div><div>########################## end 局部自定义指令</div></div>
</template><script setup>
import { ref, reactive } from 'vue'
/*** 1、局部自定义指令， 在模板中启用 v-focus*    在<script setup>定义组件内的指令，任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令*  为了区分下面全局自定义指令 v-focus，这里全局改为v-MyFocus*/
// const vFocus = {
//     mounted: (el) => el.focus()
// }
const vMyFocus = {mounted: (el) => el.focus()
}
</script>

效果：

1.2 如果是vue3的options api，自定义指令需要在directives选项中注册

<template><input v-focus />
</template>
<script>
export default{setup() {},directives: {// 指令名focus: {// 生命周期mounted(el) {// 处理DOM的逻辑el.focus()},}}
}
</script>

效果：

2、全局自定义指令

2.1 创建文件： src/directives/focus.js

export default function(app) {app.directive('focus', {mounted(el) {console.log('focus指令， mounted')el.focus()},})
}

2.2 创建文件： src/directives/index.js

import registerFocus from './focus'     // 获取焦点export default function registerDirectives(app) {registerFocus(app)
}

2.3 main.js中引入

import registerDirectives from './directives/index'const app = createApp(App)
registerDirectives(app)

报警告如下：

index.vue:9 [Vue warn]: Failed to resolve directive: focus
at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>

2.4 页面内使用

    <div>########################## start 全局自定义指令</div><div>我是一个使用全局自定义指令的input：<input type="password" v-focus /></div><div>########################## end 全局自定义指令</div>

效果：

3、常用的自定义指令（后面有新的全局自定义指令封装会更新）

3.1 input获取焦点

src/directives/focus.js

export default function(app) {app.directive('focus', {mounted(el) {console.log('focus指令， mounted')el.focus()},})
}

ts写法：

// 获取焦点
export default function(app: any) {
app.directive("focus", {mounted(el: any) {console.log("focus mounted");el.focus();}})
}

3.2 防抖

src/directives/debounce.js

注册那一步和上面focus一样（此处及后面将省略）

// 防抖
export default function (app) {app.directive('debounce', {mounted(el, binding) {console.log('el', el, 'binding', binding);let timerel.addEventListener('click', () => {if (timer) clearTimeout(timer)timer = setTimeout(() => {binding.value()}, 2000)})},})
}

ts写法：

// 防抖
export default function(app: any) {app.directive("debounce", {mounted(el: any, binding: any) {let timer:anyel.addEventListener('click', () => {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {binding.value()}, 1000)})}})
}

使用：

<template><div>我是测试防抖的全局自定义指令,如果在该间隔内再次触发，则重新计时。<button class="btn" v-debounce="testDebounceBtn" >防抖按钮：点击我，2秒后执行一次</button></div>
</template><script setup>/*** 3、防抖自定义指令 --- 全局*/
const testDebounceBtn = () => {console.log('防抖按钮：点击我，2秒内只执行一次')
}
</script>

效果：

点击按钮后2秒后执行，2秒内再次触发点击，将重新计时，重新计时后2秒后才执行。（正常开发时，时间按照实际情况设定，一般设定1秒后执行）