Wie kann ich Anweisungen in Vue3 anpassen? Code-Erklärung

Wie kann ich Anweisungen in Vue3 anpassen? Im folgenden Artikel erfahren Sie, wie Sie Anweisungen in Vue3 anpassen. Ich hoffe, er ist hilfreich für Sie!

Das Frontend des TienChin-Projekts ist Vue3. Das Frontend hat eine solche Anforderung: Einige Schaltflächen auf der Frontend-Seite müssen entsprechend den Berechtigungen des Benutzers angezeigt werden. dann wird die entsprechende Schaltfläche angezeigt; wenn der Benutzer nicht über die entsprechenden Berechtigungen verfügt, wird die Schaltfläche ausgeblendet. Dies ist grundsätzlich eine Voraussetzung.

Einige Freunde denken vielleicht zuerst darüber nach, den Befehl v-if zu verwenden. Da der Benutzer jedoch im Allgemeinen über mehrere Berechtigungen und möglicherweise sogar über Platzhalter verfügt, ist dieser Vergleich nicht einfach Aufgabe, und Sie müssen eine Methode schreiben. . . Wenn Sie diese Funktion also mit einem einzigen Befehl implementieren können, sieht sie viel professioneller aus.

Machen Sie es einfach, schauen wir uns an, wie Sie Anweisungen in Vue3 anpassen. (Teilen von Lernvideos: vue-Video-Tutorial)

1. Ergebnisanzeige

Werfen wir zunächst einen Blick auf die endgültige Verwendung benutzerdefinierter Anweisungen:

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

Freunde sehen, dieser v- hasPermission ist unsere benutzerdefinierte Anweisung. Wenn der aktuelle Benutzer über die Berechtigung user:delete verfügt, wird diese Schaltfläche nicht angezeigt. 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. Anleitungsgrundlagen

Zunächst möchte ich meinen Freunden sagen, dass Vue2 und Vue3 einige Unterschiede in den benutzerdefinierten Anweisungen aufweisen und nicht vollständig konsistent sind. Die folgende Einführung gilt hauptsächlich für Vue3.

Ich werde zuerst meinen Freunden mitteilen, wie wir es gemacht haben, und dann, wenn ich den Code erkläre, werde ich mit Ihnen über die Bedeutung jedes Parameters sprechen.

2.1 Zwei Arten von Bereichen
• Benutzerdefinierte Anweisungen können globale oder lokale Bereiche definieren.
• Vor dem offiziellen Start müssen Freunde verstehen, dass benutzerdefinierte Anweisungen zwei Bereiche haben: einer sind lokale benutzerdefinierte Anweisungen und der andere sind globale benutzerdefinierte Anweisungen. Lokale benutzerdefinierte Direktiven können nur in der aktuellen .vue-Datei verwendet werden, während globale Direktiven in allen .vue-Dateien verwendet werden können.
  2.1.1 Lokale Anweisungen
• Sie können es direkt in der aktuellen .vue-Datei wie folgt definieren:

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

In Vue3 können Sie es jedoch auch so schreiben:

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

Ich passe es hier an. Ein Befehl mit dem Namen „onceClick“ wird hinzugefügt. Nachdem Sie diesen Befehl zu einer Schaltfläche hinzugefügt haben, können Sie festlegen, wie lange die Schaltfläche nach dem Klicken deaktiviert bleibt, um zu verhindern, dass der Benutzer wiederholt klickt.

Freunde, die Ausführungslogik dieses Befehls ist eigentlich sehr einfach, wenn das Element mit diesem Befehl hinzugefügt und das Klickereignis überwacht wird. Wenn das Element nicht deaktiviert ist, legen Sie das If fest Wenn das Element deaktiviert ist, wird eine geplante Aufgabe zugewiesen, um das Element nach Ablauf verfügbar zu machen. Brother Song wird die spezifischen Parameter hier im Folgenden ausführlich vorstellen.

Aber das ist nur eine lokale Direktive, die nur in der aktuellen .vue-Datei verwendet werden kann. Wir können auch eine globale Direktive definieren, damit sie in allen .vue-Dateien verwendet werden kann.

2.1.2 Globale Anweisungen🎜

🎜Globale Anweisungen werden normalerweise in main.js geschrieben, oder wir schreiben eine separate js-Datei und führen sie dann in main.js ein. Das folgende Beispiel wird direkt in main.js geschrieben In .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);
        }
    }
})

🎜Auf diese Weise können wir den Befehl v-onceClick jederzeit und überall verwenden. 🎜🎜Sie sind möglicherweise verwirrt über die Montage und die Parameter hier, wenn Sie die Anweisungen anpassen. Dann stellt Ihnen Brother Song diese Methoden und Parameter im Detail vor. 🎜🎜🎜2.2 Sieben Hook-Funktionen🎜🎜🎜In Vue3 umfassen die Hook-Funktionen benutzerdefinierter Anweisungen hauptsächlich die folgenden sieben Typen (dies unterscheidet sich deutlich von Vue2): 🎜🎜🎜erstellt: im Attribut oder Ereignis-Listener des gebundenen Elements aufgerufen, bevor die Funktion angewendet wird. Dies ist nützlich, wenn eine Direktive an einen Ereignis-Listener angehängt werden muss, bevor der normale v-on-Ereignis-Listener aufgerufen wird. 🎜🎜beforeMount: Wird aufgerufen, wenn die Direktive zum ersten Mal an ein Element gebunden wird und bevor die übergeordnete Komponente gemountet wird. 🎜🎜montiert: Wird aufgerufen, nachdem die übergeordnete Komponente des gebundenen Elements gemountet wurde. 🎜Die meisten benutzerdefinierten Anweisungen sind hier geschrieben🎜. 🎜🎜beforeUpdate: Wird aufgerufen, bevor der VNode aktualisiert wird, der die Komponente enthält. 🎜🎜aktualisiert: Wird aufgerufen, nachdem der VNode der enthaltenden Komponente und die VNodes ihrer Unterkomponenten aktualisiert wurden. 🎜🎜beforeUnmount: Wird vor dem Aufheben der Bereitstellung der übergeordneten Komponente des gebundenen Elements aufgerufen. 🎜🎜unmount: Wird nur einmal aufgerufen, wenn die Bindung der Direktive an das Element aufgehoben wird und die Bereitstellung der übergeordneten Komponente aufgehoben wurde. 🎜🎜🎜Obwohl es viele Hook-Funktionen gibt, die vielleicht etwas einschüchternd wirken, ist die in unserer täglichen Entwicklung am häufigsten verwendete Funktion tatsächlich die Mount-Funktion. 🎜

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前端开发、编程基础视频）

Das obige ist der detaillierte Inhalt vonWie kann ich Anweisungen in Vue3 anpassen? Code-Erklärung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!