Vue3 で命令をカスタマイズするにはどうすればよいですか?コードの説明

Vue3 で命令をカスタマイズするにはどうすればよいですか?次の記事では、Vue3 で命令をカスタマイズする方法について説明します。お役に立てば幸いです。

TienChin プロジェクトのフロントエンドは Vue3 です。フロントエンドには次のような要件があります。フロントエンド ページのいくつかのボタンはユーザーの設定に基づいて表示される必要があります。ユーザーが適切な権限を持っている場合、ユーザーが対応する権限を持っている場合、対応するボタンが表示されますが、ユーザーが対応する権限を持っていない場合、ボタンは非表示になります。これは基本的に必須の要件です。

この要件を見て、最初に v-if コマンドの使用を考える友人もいるかもしれません。このコマンドは実際に実行できます。ただし、ユーザーは通常複数のアクセス許可を持っている可能性があるため、ワイルドカードも存在する可能性があります。したがって、これは比較は簡単な作業ではないため、メソッドを作成する必要があります。 。 。したがって、1 つのコマンドを使用してこの機能を実装できれば、よりプロフェッショナルな外観になります。

とにかくやってみましょう。Vue3 で命令をカスタマイズする方法を見てみましょう。 (学習ビデオ共有: vue ビデオ チュートリアル)

1. 結果の表示

まず、カスタム命令の最終的な使用方法を見てみましょう。

<button>删除用户</button>

友人には、この v-hasPermission がカスタム命令であることがわかります。現在のユーザーが user:delete 権限を持っている場合、このボタンが表示されます。ユーザーにこの権限がない場合、このボタンは表示されません。

2. 命令の基本

まず最初に、Vue2 と Vue3 のカスタム命令にはいくつかの違いがあり、完全に一致しているわけではないことを友人に伝えたいと思います。 . 以下Vue3の導入を中心に紹介します。

まず、私たちがどのようにやったかを友達と共有してから、コードを説明するときに、各パラメーターの意味について話しましょう。

2.1 2 つのスコープ

カスタム ディレクティブは、グローバル スコープまたはローカル スコープを定義できます。

正式な実装を開始する前に、カスタム命令には 2 つのスコープがあることを理解する必要があります。1 つはローカル カスタム命令、もう 1 つはグローバル カスタム命令です。ローカル カスタム命令は現在の .vue ファイルでのみ使用できますが、グローバル カスタム命令はすべての .vue ファイルで使用できます。

2.1.1 ローカル ディレクティブ

は、次のように現在の .vue ファイル内で直接定義できます。

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

ただし、Vue3 では、次のように記述できます:

<template>
    <p>
        <button>ClickMe</button>
    </p>
</template>

<script>

    import {ref} from &#39;vue&#39;;

    export default {
        name: "MyVue01",
        setup() {
            const a = ref(1);
            const btnClick = () => {
                a.value++;
            }
            return {a, btnClick}
        },
        directives: {
            onceClick: {
                mounted(el, binding, vnode) {
                    el.addEventListener(&#39;click&#39;, () => {
                        if (!el.disabled) {
                            el.disabled = true;
                            setTimeout(() => {
                                el.disabled = false;
                            }, binding.value || 1000);
                        }
                    });
                }
            }
        }
    }
</script>

ここでは、onceClick というコマンドをカスタマイズしました。このコマンドをボタン ボタンに追加した後、ボタン ボタンがクリックされてから無効になるまでの時間を設定できます。ユーザーが同じ状態を繰り返さないようにするには、状態をクリックします。

皆さん、この命令の実行ロジックは実際には非常に単純です。el は、この命令で要素を追加し、要素のクリック イベントを監視するのと同じです。要素がクリックされた場合、要素は次に、要素を無効に設定し、スケジュールされたタスクを指定し、有効期限が切れた後に要素を使用できるようにします。 Brother Song は、ここでの特定のパラメーターを以下で詳しく紹介します。

ただし、これはローカル ディレクティブにすぎず、現在の .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 コマンドを使用できます。

命令をカスタマイズするときにマウントとパラメータについて混乱するかもしれませんが、Brother Song がこれらのメソッドとパラメータを詳しく紹介します。

2.2 7 つのフック関数

Vue3 では、カスタム命令のフック関数は主に次の 7 種類になります (Vue2 とは大きく異なります)。

• created: バインドされた要素の属性またはイベント リスナーが適用される前に呼び出されます。これは、通常の v-on イベント リスナーが呼び出される前に、ディレクティブをイベント リスナーに追加する必要がある場合に便利です。
• beforeMount: ディレクティブが初めて要素にバインドされるとき、親コンポーネントがマウントされる前に呼び出されます。
• mounted: バインドされた要素の親コンポーネントがマウントされた後に呼び出されます。ほとんどのカスタム命令はここに書かれています。
• beforeUpdate: コンポーネントを含む VNode を更新する前に呼び出されます。
• updated: 含まれているコンポーネントの VNode とそのサブコンポーネントの VNode が更新された後に呼び出されます。
• beforeUnmount: バインドされた要素の親コンポーネントをアンマウントする前に呼び出されます。
• unmounted: ディレクティブが要素からアンバインドされ、親コンポーネントがアンマウントされたときに 1 回だけ呼び出されます。

フック関数はたくさんあり、少し難しく感じるかもしれませんが、日常の開発で最も一般的に使用される関数は、実際にはマウントされた関数です。

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>ClickMe</button>
<script>

    import {ref} from &#39;vue&#39;;

    export default {
        name: "MyVue01",
        setup() {
            const timeUnit = ref(&#39;s&#39;);
            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>删除用户</button>

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

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

以上がVue3 で命令をカスタマイズするにはどうすればよいですか?コードの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。