牛商做网站的理念,电脑培训班有哪些科目,中国十大网络公司排名,免费网站2021年能用的网址引言#xff1a;自定义指令#xff0c;我们可以通过插件的形式进行全局注册#xff1a; 例如#xff1a;在提交按钮请求接口时候#xff0c;为了防止重复提交#xff0c;而导致的请求资源浪费#xff0c;或者是新增提交时候#xff0c;防止新增相同的数据。 我们的全局…引言自定义指令我们可以通过插件的形式进行全局注册 例如在提交按钮请求接口时候为了防止重复提交而导致的请求资源浪费或者是新增提交时候防止新增相同的数据。 我们的全局注册自定义防重按钮
1、编写防重指令插件
// plugins/myDirective/index.ts 文件
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 truelet timer: number | undefined setTimeout(():void {el.disabled falseclearTimeout(timer)timer undefined}, binding.value || 2000)}})}})}
}注意在定义自定义指令时候我们通常用到的只有 mounted 和 updated 生命钩子函数详情参考自定义指令
2、引入自定义插件
// main.ts
import { createApp } from vue
import myDirective from ./plugins/myDirective/index.ts
const app createApp(App)
// 全局注册 指令 myDirective
app.use(myDirective)3、使用自定义插件
通过 v-xx 写法 直接给按钮添加新的指令即可 v-myRepeat
template
el-button v-myRepeat clickhandleChangeNum自定义插件指令-{{num}}/el-button
/template
script setup
import { ref, onActivated, inject, getCurrentInstance } from vue
const num ref(0)
const handleChangeNum () {num.value num.value 1console.log(, num.value)
}
/script
