• 技术文章 >web前端 >Vue.js

    Vue3中如何自定义指令?代码讲解

    青灯夜游青灯夜游2022-07-28 19:33:45转载220
    Vue3中如何自定义指令?下面本篇文章就来手把手教大家在 Vue3 中自定义指令,希望对大家有所帮助!

    TienChin 项目前端是 Vue3,前端有这样的一个需求:有一些前端页面上的按钮要根据用户的权限来决定是否展示出来,如果用户具备相应的权限,那么就展示对应的按钮;如果用户不具备对应的权限,那么按钮就隐藏起来。大致上就这样一个需求。

    看到这个需求,可能有小伙伴首先想到用 v-if 指令,这个指令确实也能做,但是,由于用户具备的权限一般来说可能是多个,甚至可能还有通配符,所以这个比对并不是一个容易的事情,肯定得写方法。。。所以,如果能用一个指令来实现这个功能,那么就会显得专业很多了。

    说干就干,我们来看看 Vue3 中如何自定义指令。(学习视频分享:vue视频教程

    1. 成果展示

    我们先来看看实现自定义指令最终的使用方式:

    <button @click="btnClick" v-hasPermission="['user:delete']">删除用户</button>

    小伙伴们看到,这个 v-hasPermission 就是我们的自定义指令,如果当前用户具备 user:delete 权限,这个按钮就会展示出来,如果当前用户不具备这个权限,这个按钮就不会展示出来。

    2. 指令基础

    先要和小伙伴们说一下,Vue2 和 Vue3 在自定义指令上有一些差异,并不完全一致,下面的介绍主要是针对 Vue3 的介绍。

    我先来和小伙伴们分享一下我们具体是怎么做的,然后在讲解代码的时候再来和大家说说各个参数的含义。

    2.1 两种作用域

    自定义指令可以定义全局的,也可以定义局部的。

    在正式开搞之前,小伙伴们需要先明白,自定义指令有两种作用域,一种是局部的自定义指令,还有一种是全局的自定义指令。局部的自定义指令就只能在当前 .vue 文件中使用,全局的则可以在所有的 .vue 文件中使用。

    2.1.1 局部指令

    直接在当前 .vue 文件中定义即可,如下:

    directives: {
      focus: {
        // 指令的定义
        mounted(el) {
          el.focus()
        }
      }
    }

    不过,在 Vue3 中,也可以这样写:

    <template>
        <p>
            <button v-onceClick="10000" @click="btnClick">ClickMe</button>
        </p>
    </template>
    
    <script>
    
        import {ref} from 'vue';
    
        export default {
            name: "MyVue01",
            setup() {
                const a = ref(1);
                const btnClick = () => {
                    a.value++;
                }
                return {a, btnClick}
            },
            directives: {
                onceClick: {
                    mounted(el, binding, vnode) {
                        el.addEventListener('click', () => {
                            if (!el.disabled) {
                                el.disabled = true;
                                setTimeout(() => {
                                    el.disabled = false;
                                }, binding.value || 1000);
                            }
                        });
                    }
                }
            }
        }
    </script>

    这里我自定义了一个名叫 onceClick 的指令,给一个 button 按钮加上这个指令之后,可以设置这个 button 按钮在点击多久之后,处于禁用状态,防止用户重复点击。

    小伙伴们看,这个指令的执行逻辑其实很简单,el 相当于添加了这个指令的元素,监听该元素的点击事件,如果点击该元素时,该元素不是处于禁用状态,那么就设置该元素为禁用,给一个定时任务,到期后使该元素变为可用。这里边具体的参数,松哥下面会跟大家详细介绍。

    不过这只是一个局部指令,只能在当前 .vue 文件中使用,我们也可以定义全局指令,这样就可以在所有的 .vue 文件中使用了。

    2.1.2 全局指令

    全局指令我们一般写在 main.js 中,或者写一个单独的 js 文件然后在 main.js 中引入,下面的例子是直接写在 main.js 中:

    const app = createApp(App);
    
    app.directive('onceClick',{
        mounted(el, binding, vnode) {
            el.addEventListener('click', () => {
                if (!el.disabled) {
                    el.disabled = true;
                    setTimeout(() => {
                        el.disabled = false;
                    }, binding.value || 1000);
                }
            });
        }
    })

    这样,我们就可以随时随地去使用 v-onceClick 这个指令了。

    可能小伙伴感觉比较疑惑,自定义指令时候的 mounted 以及这里的参数都是咋回事,那么接下来松哥就来和大家详细介绍一下这些方法和参数。

    2.2 七个钩子函数

    在 Vue3 中,自定义指令的钩子函数主要有如下七种(这块跟 Vue2 差异较大):

    虽然钩子函数比较多,看着有点唬人,不过我们日常开发中用的最多的其实是 mounted 函数。

    2.3 四个参数

    这里七个钩子函数,钩子函数中有回调参数,回调参数有四个,含义基本上和 Vue2 一致:

    除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

    2.4 动态参数

    有一种动态参数,这里也和小伙伴们分享下。正常情况下,我们自定义指令时传递的参数都是通过 binding.value 来获取到的,不过在这之外还有一种方式就是通过 binding.arg 获取参数。

    我举一个简单例子,假设我们上面这个 onceClick 指令,默认的时间单位时毫秒,假设现在想给时间设置单位,那么我们就可以这样写:

    const app = createApp(App);
    
    app.directive('onceClick',{
        mounted(el, binding, vnode) {
            el.addEventListener('click', () => {
                if (!el.disabled) {
                    el.disabled = true;
                    let time = binding.value;
                    if (binding.arg == "s") {
                        time = time * 1000;
                    }
                    setTimeout(() => {
                        el.disabled = false;
                    }, time);
                }
            });
        }
    })

    在自定义指令的时候,获取到 binding.arg 的值,这样就可以知道时间单位了,在使用该指令的时候,方式如下:

    <button v-onceClick:[timeUnit]="10" @click="btnClick">ClickMe</button>
    <script>
    
        import {ref} from 'vue';
    
        export default {
            name: "MyVue01",
            setup() {
                const timeUnit = ref('s');
                return {timeUnit}
            }
        }
    </script>

    timeUnit 是一个提前定义好的变量。

    3. 自定义权限指令

    好啦,有了上面的基础知识,接下来就来看我们本文的主题,自定义权限指令,我写一个简单的例子大家来看下:

    const usersPermissions = ['user'];
    
    app.directive('hasPermission', {
        mounted(el, binding, vnode) {
            const {value} = binding;
            let f = usersPermissions.some(p => {
                return p.indexOf(value) !== -1;
            });
            if (!f) {
                el.parentNode && el.parentNode.removeChild(el);
            }
        }
    })

    usersPermissions 表示当前用户所具备的权限,正常该数据应该是从服务端加载而来,但是我这里简单起见,就直接定义好了。

    具体的逻辑很简单,先从 binding 中提取出 value 的值,这就是当前控件所需要的权限,然后遍历 usersPermissions 用一个 some 函数,去查看 usersPermissions 中是否有满足条件的值,如果没有,说明当前用户不具备展示该组件所需要的权限,那么就要隐藏这个组件,隐藏的方式就是获取到当前组件的父组件,然后从父组件中移除当前组件即可。

    这是一个全局的指令,定义好之后,我们就可以在组件中直接使用了:

    <button @click="btnClick" v-hasPermission="['user:delete']">删除用户</button>

    好啦,Vue3 自定义组件学会了没?松哥在最近的 TienChin 项目视频中也会和大家分享这块的内容,敬请期待。

    (学习视频分享:web前端开发编程基础视频

    以上就是Vue3中如何自定义指令?代码讲解的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
    专题推荐:自定义指令 vue3 vue.js
    上一篇:聊聊Vue2开发者如何快速上手Vue3 下一篇:详解Vue3 Suspense:是什么?能干什么?如何用?
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 手把手教你使用Vue3实现图片散落效果• 深入浅析vue3+vite中怎么使用svg图标• 一文了解Vue3中的watchEffect,聊聊其应用场景!• 通过9个Vue3 组件库,看看聊前端的流行趋势!• Vue3和Vue2的差异是什么?全方位对比一下!• Vue2和Vue3在响应式上有什么区别?简单对比
    1/1

    PHP中文网