Comment personnaliser les instructions dans Vue3 ? Explication du code

Comment personnaliser les instructions dans Vue3 ? L'article suivant vous apprendra comment personnaliser les instructions dans Vue3. J'espère qu'il vous sera utile !

Le front-end du projet TienChin est Vue3. Le front-end a une telle exigence : certains boutons sur la page front-end doivent être affichés en fonction des autorisations de l'utilisateur. alors le bouton correspondant sera affiché ; si l'utilisateur ne dispose pas des autorisations correspondantes, le bouton sera masqué. Il s’agit essentiellement d’une exigence.

Voyant cette demande, certains amis peuvent d'abord penser à utiliser la commande v-if. Cette commande peut effectivement être effectuée. Cependant, comme l'utilisateur peut généralement disposer de plusieurs autorisations, et peut même avoir des caractères génériques, cette comparaison n'est pas facile. tâche, et vous devez écrire une méthode. . . Par conséquent, si vous pouvez utiliser une seule commande pour implémenter cette fonction, cela semblera beaucoup plus professionnel.

Faites-le, voyons comment personnaliser les instructions dans Vue3. (Partage vidéo d'apprentissage : tutoriel vidéo Vue)

1. Affichage des résultats

Jetons d'abord un coup d'œil à l'utilisation finale des instructions personnalisées :

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

Les amis voient, ce v- hasPermission est notre instruction personnalisée. Si l'utilisateur actuel dispose de l'autorisation user:delete, ce bouton sera affiché. Si l'utilisateur actuel n'a pas cette autorisation, ce bouton ne sera pas affiché. 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

2. Bases des instructions

Tout d'abord, je tiens à dire à mes amis que Vue2 et Vue3 ont quelques différences dans les instructions personnalisées et ne sont pas complètement cohérentes. L'introduction suivante concerne principalement Vue3.

Je partagerai d'abord avec mes amis comment nous avons fait, puis quand j'expliquerai le code, je vous parlerai de la signification de chaque paramètre.

2.1 Deux types de portées
• Les instructions personnalisées peuvent définir des portées globales ou locales.
• Avant le lancement officiel, les amis doivent comprendre que les instructions personnalisées ont deux portées, l'une est des instructions personnalisées locales et l'autre est des instructions personnalisées globales. Les directives personnalisées locales ne peuvent être utilisées que dans le fichier .vue actuel, tandis que les directives globales peuvent être utilisées dans tous les fichiers .vue.
  2.1.1 Directives locales
• Vous pouvez la définir directement dans le fichier .vue actuel, comme suit :

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);
            }
        });
    }
})

Cependant, dans Vue3, vous pouvez également l'écrire comme ceci :

<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>

Je le personnalise ici Une commande appelée onceClick est ajoutée. Après avoir ajouté cette commande à un bouton, vous pouvez définir combien de temps après avoir cliqué sur le bouton, il sera dans un état désactivé pour empêcher l'utilisateur de cliquer à plusieurs reprises.

Mes amis, la logique d'exécution de cette commande est en fait très simple. el équivaut à ajouter l'élément avec cette commande et à surveiller l'événement de clic de l'élément si l'élément n'est pas désactivé lorsque l'on clique sur l'élément, alors définissez le If. l'élément est désactivé, une tâche planifiée est donnée pour rendre l'élément disponible après expiration. Brother Song présentera les paramètres spécifiques en détail ci-dessous.

Mais ce n'est qu'une directive locale qui ne peut être utilisée que dans le fichier .vue actuel. Nous pouvons également définir une directive globale afin qu'elle puisse être utilisée dans tous les fichiers .vue.

2.1.2 Directives globales🎜

🎜Les directives globales sont généralement écrites dans main.js, ou nous écrivons un fichier js séparé puis l'introduisons dans main.js. L'exemple suivant est écrit directement dans main. En .js : 🎜

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);
        }
    }
})

🎜De cette façon, nous pouvons utiliser la commande v-onceClick à tout moment et n'importe où. 🎜🎜Vous pourriez être confus au sujet du montage et des paramètres ici lors de la personnalisation des instructions. Ensuite, Brother Song vous présentera ces méthodes et paramètres en détail. 🎜🎜🎜2.2 Sept fonctions hook🎜🎜🎜Dans Vue3, les fonctions hook des instructions personnalisées incluent principalement les sept types suivants (c'est assez différent de Vue2) : 🎜🎜🎜created : dans l'attribut ou l'écouteur d'événement de l'élément lié est appelé avant que la fonction ne soit appliquée. Ceci est utile lorsqu'une directive doit être ajoutée à un écouteur d'événement avant que l'écouteur d'événement v-on normal ne soit appelé. 🎜🎜beforeMount : Appelé lorsque la directive est liée pour la première fois à l'élément et avant que le composant parent ne soit monté. 🎜🎜Mounted : Appelé après le montage du composant parent de l'élément lié, 🎜La plupart des instructions personnalisées sont écrites ici🎜. 🎜🎜beforeUpdate : Appelé avant de mettre à jour le VNode contenant le composant. 🎜🎜updated : appelé après la mise à jour du VNode du composant conteneur et des VNodes de ses sous-composants. 🎜🎜beforeUnmount : Appelé avant de démonter le composant parent de l'élément lié 🎜🎜unmounted : Appelé une seule fois lorsque la directive n'est pas liée à l'élément et que le composant parent a été démonté. 🎜🎜🎜Bien qu'il existe de nombreuses fonctions hook, qui peuvent sembler un peu intimidantes, la fonction la plus couramment utilisée dans notre développement quotidien est en fait la fonction montée. 🎜

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="[&#39;user:delete&#39;]">删除用户</button>

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

（学习视频分享：web前端开发、编程基础视频）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!