Vue 3 カスタムディレクティブ開発の概要

<p v-highlight="'yellow'">このテキストを明るい黄色で強調表示します</p>

app = createApp(App) を作成します。
app.directive('ハイライト', {
beforeMount(el, バインディング, vnode) {
el.style.background = バインディング値
}
})

エクスポートデフォルトdefineComponent({
名前: "Webデザイナー",
コンポーネント:
デザイナー、
},
ディレクティブ: {
ハイライト:
beforeMount(el, バインディング, vnode) {
el.style.background = バインディング値;
},
},
},
});

<p v-highlight="'yellow'">このテキストを明るい黄色で強調表示します</p>

bind(el, バインディング, vnode) {
  定数 vm = vnode.context
}

マウント(el, バインディング, vnode) {
  const vm = バインディングインスタンス
}

'vue' から { App } をインポートします

 関数 SpellCheckMain(app: App, オプション: any) {
//
}

 エクスポートデフォルト{
    インストール:SpellCheckMain
}

関数 SpellCheckMain(app: App, オプション: any) {
    const SpellCheckAttribute = "スペルチェック属性";

     SpellCheckTimer: Map<文字列、数値> = new Map();
    チェッカーIDを0にします。
    関数 checkElement(el: HTMLElement) {
        attr = el.getAttribute(SpellCheckAttribute); とします。
        （属性）の場合{
            タイムアウトをクリアします(SpellCheckTimer.get(attr));
            タイマーをsetTimeout(() => { checkElementAsync(el) }, 500 に設定します。
            SpellCheckTimer.set(属性、タイマー)
        }
    }
    関数 checkText(単語?: 文字列 | null): [文字列?] {
        if (!単語) {
            戻る [];
        }
        errorWordList: [文字列?] = [];
        試す {
            wordsList を words.match(/[a-zA-Z]+/ig) とします。
            wordsList?.forEach((単語) => {
                if (!checkWord(単語)) {
                    errorWordList.push(単語);
                }
            })
        }
        キャッチ{

         }
        errorWordList を返します。
    }
    関数 checkWord(テキスト: 文字列) {
        //スペルチェックをシミュレートします。ここでは他のチェックライブラリを使用します。 return text.length > 6 ? false : true;
    }
    関数 checkElementAsync(el: HTMLElement) {

         text = (el as HTMLInputElement).value || el.innerText; とします。
        結果 = checkText(テキスト) とします。

         attr = el.getAttribute(SpellCheckAttribute); とします。
        （！属性）の場合{
            戻る;
        }

         if (結果 && 結果.長さ) {
            el.style.background = "ピンク"
            div = document.getElementById(attr); とします。
            場合 (!div) {
                div = document.createElement("div");
                div.id = 属性;
                div.style.position = "絶対"
                div.style.top = "0px"
                div.style.left = el.clientWidth + "px"

                 親要素の場合
                    el.parentElement.style.position = "相対"
                    el.parentElement.lastChild が el の場合
                        el.parentElement.appendChild(div);
                    }
                    それ以外 {
                        el.parentElement.insertBefore(div, el.nextSibling);
                    }
                }
            }
            div.innerHTML = result.length.toString() + " - " + result.join(",");
        } それ以外 {
            el.style.background = "";

             div = document.getElementById(attr); とします。
            （div）の場合{
                div.innerHTML = ""
            }
        }

         console.log(結果)
    }

     app.directive('スペルチェック', {
        作成された() {
            console.log("作成済み", 引数)
        },
        マウント: 関数 (el, バインディング, vnode, oldVnode) {

             console.log("マウント済み", 引数)
            //親のチェッカーIDを設定する
            attr = "spellcheck-" + (checkerId++) とします。
            el.setAttribute(スペルチェック属性、属性);
            console.log("属性", 属性)

             if (el.tagName.toUpperCase() === "DIV") {
                el.addEventListener("ぼかし", 関数() {
                    チェック要素(el)
                }、 間違い）;
            }
            if (el.tagName.toUpperCase() === "入力") {
                el.addEventListener("keyup", 関数() {
                    チェック要素(el)
                }、 間違い）;
            }
            // el.addEventListener("focus", 関数() {
            // チェック要素(el)
            // }、 間違い）;
        },
        更新: 関数 (el) {
            console.log("componentUpdated", 引数)
            要素をチェックします(el);
        },
        アンマウント: 関数 (el) {
            console.log("マウント解除", 引数)

             attr = el.getAttribute(SpellCheckAttribute); とします。
            （属性）の場合{
                div = document.getElementById(attr); とします。
                （div）の場合{
                    div.remove();
                }
            }
        }
    })
}

/// <参照パス="./vue-app.d.ts" />
'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'./router' からルーターをインポートします
'./plugins/SpellCheckPlugin' から SpellCheckPlugin をインポートします。

 app = createApp(App) を作成します。
app.use(スペルチェックプラグイン)
app.use(ルーター).mount('#app') を実行します。

<テンプレート>
  <div ref="ssHost" スタイル="幅: 100%; 高さ: 600px"></div>
  <div><div ref="fbHost" スペルチェック v-spell-check="true" contenteditable="true" スペルチェック="false" style="border: 1px solid #808080;width:600px;"></div></div>
  <div><input v-model="value1" v-spell-check スペルチェック="false" style="width:200px;" /></div>
</テンプレート>