Vue3.0でカスタム命令を書くための簡単な手順

序文

Vue には、v-if、v-bind、v-on などの豊富な組み込みディレクティブが用意されています。さらに、Vue.directive({}) または directives:{} を通じてディレクティブを定義することもできます。

学習を始める前に、カスタム命令の適用シナリオを理解する必要があります。あらゆる機能の開発は、特定の問題を解決することです。

カスタム命令を使用すると、DOM に対してより低レベルの操作を実行できます。これにより、いくつかのシナリオで問題を迅速に解決するためのアイデアが得られるだけでなく、基礎となる Vue をさらに理解できるようになります。

最初のステップ

main.js内

srcの下の履歴書に対応するフォルダ

import Directives from "@/Directives/index"; // カスタムディレクティブ (@ は src を表します)
const app = createApp(App);
app.use(ディレクティブ);
app.mount("#app");

ステップ2

import copy from "./copy"; // 必要な命令をインポートする const directivesList = {
  コピー // マウント};

constディレクティブ = {
  インストール: 関数 (アプリ) {
    Object.keys(directivesList).forEach((key) => {
      app.directive(key, directivesList[key]); // 登録 });
  }
};

デフォルトのディレクティブをエクスポートします。 // 例外

ステップ3

ディレクティブの内容をcopy.jsに記述します。Vue2とVue3はライフサイクル関数の一部のみを変更します。

「element-plus」から ElMessage をインポートします。
定数コピー = {
  マウントされた（el、{値}）{
    el.$value = 値;
    el.ハンドラ = () => {
      if (!el.$value) {
        // 値が空の場合はプロンプトを表示します ElMessage.warning({
          メッセージ: "こんにちは、コピーされた値は空にできません。",
          タイプ: 「警告」
        });
        戻る;
      }
      if (window.clipboardData) {
        window.clipboardData.setData("テキスト", el.$value);
      } それ以外 {
        (関数 (コンテンツ) {
          document.oncopy = 関数 (e) {
            e.clipboardData.setData("テキスト", コンテンツ);
            e.preventDefault();
            ドキュメント.oncopy = null;
          };
        })(el.$値);
        document.execCommand("コピー");
      }

      ElMessage.success("コピーが成功しました");
    };
    // クリック イベントをバインドします el.addEventListener("click", el.handler);
  },
  beforeUpdate (el, {
    価値
  }) {
    el.$value = 値;
  },
  アンマウント（el）{
    el.removeEventListener("click", el.handler);
  }
};

デフォルトのコピーをエクスポートします。