vue3第三十六节(自定义插件之自定义指令)防重指令

引言:自定义指令,我们可以通过插件的形式进行全局注册: 例如:在提交按钮请求接口时候,为了防止重复提交,而导致的请求资源浪费,或者是新增提交时候,防止新增相同的数据。 我们的全局注册自定义防重按钮

1、编写防重指令插件

// plugins/myDirective/index.ts 文件

typescript 复制代码
import { App, AppContext} from 'vue'
export default {
	// 通过install 方法
    install(app:App, config:AppContext) {
        app.directive('MyRepeat', {
            mounted: function(el: HTMLButtonElement, binding: any) {
                el.addEventListener('click',() => {
                    if (!el.disabled) {
                        el.disabled = true
                        let timer: number | undefined = setTimeout(():void => {
                            el.disabled = false
                            clearTimeout(timer)
                            timer = undefined
                        }, binding.value || 2000)
                    }
                })
            }
        })
    }
}

注意 :在定义自定义指令时候,我们通常用到的,只有 mounted 和 updated 生命钩子函数;详情参考自定义指令

2、引入自定义插件

// main.ts

javascript 复制代码
import { createApp } from 'vue'
import myDirective from './plugins/myDirective/index.ts'
const app = createApp(App)
// 全局注册 指令 myDirective
app.use(myDirective)

3、使用自定义插件

通过 v-xx 写法 直接给按钮添加新的指令即可 v-myRepeat

xml 复制代码
<template>
<el-button v-myRepeat @click="handleChangeNum">自定义插件指令-{{num}}</el-button>
</template>
<script setup>
import { ref, onActivated, inject, getCurrentInstance } from "vue"
const num = ref(0)
const handleChangeNum = () => {
  num.value = num.value + 1
  console.log('===', num.value)
}
</script>
相关推荐
言兴3 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte6 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常8 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常9 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101813 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28120 分钟前
Chrome插件开发
前端
前端 贾公子33 分钟前
Monorepo + vite 怎么热更新
前端
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#