vue3中，全局自定义指令——DirectiveBinding & v-throttle节流-保存和提交按钮时间间隔内点击多次只执行一次

vue3中，全局自定义指令——DirectiveBinding & v-throttle节流-保存和提交按钮时间间隔内点击多次只执行一次

页面

 <el-button v-throttle="3000" type="primary" @click="save" > 保存 </el-button> 

方法

library\plugins\directive.ts

import type { 
    DirectiveBinding } from 'vue' export function setup(app: any) { 
    / * @description 自定义节流指令v-throttle */ app.directive('throttle', { 
    mounted(el: any, binding: DirectiveBinding) { 
    let { 
    throttleTime } = binding.value if (!throttleTime) { 
    throttleTime = 1000 } let timer: any let disable = false el.addEventListener( 'click', (event: any) => { 
    if (timer) { 
    clearTimeout(timer) } if (!disable) { 
    disable = true } else { 
    event && event.stopImmediatePropagation() } timer = setTimeout(() => { 
    timer = null disable = false }, throttleTime) }, true ) }, }) } 

附：自定义vue3指令

在vue3中，自定义指令需要使用directive函数来自定义指令

import { 
   createApp} from 'vue' const app = createApp({ 
   }) app.directive('demo',{ 
    //指令绑定到元素时调用 mounted(el,binding){ 
    console.log(binding.value) }, //指令与元素解绑时调用 unmounted(el,binding){ 
   } }) 

定义一个v-demo的指令，当该指令绑定到元素时，会调用mounted方法，并传入两个参数：元素本身和指令对象（包含了一些属性，比如：值、修饰符等），当指令与元素解绑时，会调用unmounted方法。

使用指令

<div v-demo="hello world"> 自定义指令 </div> 

这样，在页面渲染完成后，控制台就会输出字符串“hello world”。

注意：在vue3中，不能通过全局注册方式来注册自定义指令。必须要在应用实例上使用directive()方法进行注册。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10789.html