vue全局自定义指令

绝地灬酷狼 2022-09-08 04:55 207阅读 0赞

一、用一个页面放自定义方法

clickStateForm.js

/**
     * @description 自定义指令v-preventClick 防止重复点击
     */
    export default {
        install(Vue) {
            Vue.directive('preventClick', {
                inserted(el, binding) {
                    el.addEventListener('click', () => {
                     //这里写自定义指令方法
                        console.log('自定义指令方法')
                            // if (!el.disabled) {
                            //     el.disabled = true
                            //     setTimeout(() => {
                            //         el.disabled = false
                            //     }, 6000)
                            // }
                    })
                },
            })
        },
    }

二、全局引入

main.js

import preventClick from '@/utils/clickStateForm'
    Vue.use(preventClick)

三、使用

在需要的按钮上加 v-preventClick ，点击按钮就可以调用定义的方法了。

<el-button 
              v-preventClick 
              type="text"
              @click="handleEdit(row)"
            >
              修改
            </el-button>

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue---内置指令、自定义指令（详细）、全局指令与局部指令

目录一、v-on 二、v-bind、v-model 三、v-if、v-else、v-show、v-for 四、v-text、v-big 五、v-html 六、v-

一时失言乱红尘/ 2024年04月07日 12:56/ 0 赞/ 22 阅读

相关 vue自定义指令

示例：我们注册一个全局的v-focus指令 <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <

朱雀/ 2023年03月06日 03:56/ 0 赞/ 177 阅读

相关 vue 自定义指令

项目中使用指令的情景是“有无权限” ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

灰太狼/ 2022年11月04日 12:29/ 0 赞/ 202 阅读

相关 vue全局自定义指令

一、用一个页面放自定义方法 clickStateForm.js / @description 自定义指令v-preventClick 防止重复点击

绝地灬酷狼/ 2022年09月08日 04:55/ 0 赞/ 208 阅读

相关 Vue全局自定义指令-输入指定位数数字

在vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，除了默认的内置指令，比如v-model、v-show等等，但有时候需

亦凉/ 2022年04月12日 03:59/ 0 赞/ 246 阅读

相关 vue 自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你

男娘i/ 2022年04月03日 04:30/ 0 赞/ 339 阅读

相关 Vue自定义指令

`v-on 、v-model、v-show` 等指令，在操作 dom 时使用了 ref 属性，其实指令也是操作dom 的一种方式，但有时，这些指令并不能满足我们的需求，因此

比眉伴天荒/ 2022年01月29日 02:53/ 0 赞/ 329 阅读

相关 Vue 自定义指令

Vue 自定义指令除了核心功能默认内置的指令 (`v-model` 和 `v-show`)，Vue 也允许注册自定义指令。

待我称王封你为后i/ 2021年12月16日 05:43/ 0 赞/ 388 阅读

相关 Vue-自定义全局指令和局部指令的方法详解

自定义全局指令语法： `Vue.directive ('Directive_Name',{Hook_Function:callback(el,b

亦凉/ 2021年12月01日 15:12/ 0 赞/ 480 阅读

相关 vue 自定义指令

自定义指令: 1、全局指令: (1)创建 Vue.directive('名称',{ 钩子函数:function(el,

曾经终败给现在/ 2021年07月24日 18:28/ 0 赞/ 580 阅读