手把手教你在 Vue3 中自定义指令

更新日期: 2022-07-26阅读: 861标签: 指令作者: 江南一点雨

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

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

说干就干,我们来看看 Vue3 中如何自定义指令。

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>
    <div>
        <button v-onceClick="10000" @click="btnClick">ClickMe</button>
    </div>
</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 差异较大):

  • created:在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时,这很有用。
  • beforeMount:当指令第一次绑定到元素并且在挂载父组件之前调用。
  • mounted:在绑定元素的父组件被挂载后调用,大部分自定义指令都写在这里
  • beforeUpdate:在更新包含组件的 VNode 之前调用。
  • updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用。
  • beforeUnmount:在卸载绑定元素的父组件之前调用
  • unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次。

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

2.3 四个参数

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

  • el:指令所绑定的元素,可以用来直接操作 dom,我们松哥说想实现一个可以自动判断组件显示还是隐藏的指令,那么就可以通过 el 对象来操作 DOM 节点,进而实现组件的隐藏。
  • binding:我们通过自定义指令传递的各种参数,主要存在于这个对象中,该对象属性较多,如下属性是我们日常开发使用较多的几个:

    • name:指令名,不包括 v- 前缀。
    • value:指令的绑定值,例如:v-hasPermission="['user:delete']" 中,绑定值为 'user:delete',不过需要小伙伴们注意的是,这个绑定值可以是数组也可以是普通对象,关键是看你具体绑定的是什么,在 2.1 小节的案例中,我们的 value 就是一个数字。
    • expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。
    • arg:传给指令的参数,可选。例如 v-hasPermission:[name]="'zhangsan'" 中,参数为 "name"。
  • vnode:Vue 编译生成的虚拟节点。
  • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

除了 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 项目视频中也会和大家分享这块的内容,敬请期待。

来源:https://segmentfault.com/a/1190000042219550

链接: https://fly63.com/article/detial/11935

指令式编程 VS 声明式编程

指令式编程:告诉机器该如何做,并得到自己想要的结果。声明式编程:告诉机器您想得到什么,让机器自己计算该如何做。

vue内置指令大全_整理常用的Vue内置指令

整理vue常用的内置指令:v-bind指令、v-text指令、v- html指令、v-show指令、v-if指令、v-else 指令、v-else-if 指令、v-for 指令、v-on 指令、v-model 指令、v-once 指令、v-cloak指令、v-pre指令

如何在Vue里建立长按指令

本文将解释如何通过按下(或按住)按钮来执行功能和删除输入。首先,我将解释如何在VanillaJS中实现这一目标。然后,为它创建一个Vue指令。那么,让我们开始吧。

深入解析Vue.directive 自定义指令

全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive。说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能。

VUE指令大全

v-text主要用来更新textContent,可以等同于JS的text属性。v-html双大括号的方式会将数据解释为纯文本,而非HTML。为了输出真正的HTML,可以用v-html指令。它等同于JS的innerHtml属性。

Vue中的全部指令

可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:动态参数预期会求出一个字符串,异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

vue v-for 使用问题Error in render

今天使用v-for指令的时候遇到一个错误:[Vue warn]: Error in render: \\\"TypeError: Cannot read property \\\'children\\\' of undefined\\\",猜测使用了嵌套属性的原因,在页面中无法解析出具体属性值

Vue.js 自定义指令使用场景及案例

使用场景:代码复用和抽象的主要形式是组件;当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令;但是,对于大幅度的 DOM 变动,还是应该使用组件

Vue中插槽指令

意义就是在组件里留着差值方便后续组件内容新增,而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量,组件里没有设置插件名称,页面中插槽中写了插槽名称 结果页面中插槽不会被渲染

Vue常用指令

vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令。本文详细介绍了vue.js的常用指令。Vue.js 使用了基于 HTML 的模板语法最简单的使用vue的方式是渲染数据,渲染数据最常见的形式就是

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!