Vueはキー表示のショートカットキー効果を取得する入力コンポーネントを実装します

ページ上でショートカットキーをカスタマイズする要件に遭遇し、ショートカットキーを設定して表示する場所が必要になりました。Element UI を調べてみたところ、少し変更するだけで使用できるコンポーネントがなかったので、自分で作成しました。
これにはショートカットキーを表示する機能のみがあります。ショートカットキーの実際のバインドは、返されるショートカットキーデータに依存し、別のコンポーネントによって処理されます。現在はChrome環境のみテストされています。

効果は以下のとおりです。

要点

入力のように見えますが、実際にはコンポーネント内にラベル効果が表示され、削除ボタンも必要です。これには、入力ボックスに HTML コードを配置する必要があります。ブラウザの Input コンポーネントは明らかに適切ではないため、Input コンポーネントの効果を自分で模倣することしかできません。

フォーカス、ぼかし、選択したハイライト効果

非入力コンポーネントには、フォーカス、ぼかし、選択されたハイライト効果などの効果はありません。幸いなことに、ブラウザは実装方法を予約しており、ネットユーザーはオンラインですでに解決策を提供しています。divにtabindex="0"属性を追加することで、divはこれらの効果を得ることができます。

tabindex 属性は、Tab キーの順序を指定します。0 を指定すると、コンポーネントはデフォルトの順序で選択されます。-1 を指定すると、コンポーネントは選択されません。 Inputコンポーネントの形式なので、Tabで取得できるのは当然です。

次に、フォーカスボーダー効果を得るためにCSSを追加し、マウスを動かすとテキストタイプのポインターが表示されます。

.ショートカットキー入力{
 カーソル: テキスト;
 遷移: 境界線の色 0.2s 立方ベジェ(0.645, 0.045, 0.355, 1);
}
.ショートカットキー入力:フォーカス{
 境界線の色: #188cff;
 ボックスシャドウ: 0 0 4px rgba(24, 140, 255, 0.38);
}

テキストプロンプト

コンテンツがない場合は、Input と同じにする必要があり、デフォルトでテキストプロンプトを表示できます。これも内部に div を配置し、Vue で制御します。出力ラベル変数にデータがある場合、この要素は表示されません。

カーソルの点滅効果

これは比較的簡単に処理できます。Input クラスに疑似要素を配置し、フォーカスが取得されたときにこの疑似要素を追加し、この要素に CSS3 アニメーションを与えると、点滅するカーソルの効果が得られます。

@keyframes 点滅 {
 0% { 不透明度: 0; }
 100% { 不透明度: 1; }
}
.ショートカットキー入力.カーソル::after {
 コンテンツ: "|";
 アニメーション: 点滅 1.2 秒、緩和 0 秒、無限;
 フォントサイズ: 18px;
 位置: 絶対;
 上: 1px;
 左: 8px;
}

キーキャプチャ

キーキャプチャは主にkeydownイベントに依存します。返されるイベントは、alt、ctrl（コントロール）などの情報が押されたかどうかを示しますので、この情報に頼ってキーの組み合わせを実現できます。
キーを押すたびにイベントがトリガーされるため、ファンクションキーイベントをブロックする必要があります。このコードでは、非ファンクションキーの組み合わせのみを実装しています。多機能キーが必要な場合は、別の変数を作成してキーの連続押下状況を判断し、処理することができます。

  ハンドルキーダウン(e) {
   const { altKey、ctrlKey、shiftKey、キー、コード } = e;
   if (!CODE_CONTROL.includes(キー)) {
    if (!this.keyRange.includes(code)) が返されます;
    controlKey = "" とします。
    [
     { キー: altKey、テキスト: "Alt" },
     { キー: ctrlKey、テキスト: "Ctrl" },
     { キー: shiftKey、テキスト: "Shift" }
    ].forEach(現在のキー => {
     (curKey.key) の場合 {
      if (controlKey) controlKey += "+";
      コントロールキー + = curKey.text;
     }
    });
    if (キー) {
     if (controlKey) controlKey += "+";
     コントロールキー += key.toUpperCase();
    }
    this.addHotkey({ text: controlKey, controlKey: { altKey, ctrlKey, shiftKey, key, code } });
   }
   e.preventDefault();
  },

CODE_CONTROL は、処理を簡単にするための別のプリセットキーコードセットです。元々は keyCode が使用されていましたが、keyCode は非推奨となり、code が推奨されます。
addHotkey は対応する変数に追加される関数で、主に重複したショートカットキーがあるかどうかを判定します。
次に、ショートカットキーが複数ある場合に重複があるかどうかを判断するための外部検証インターフェイスが予約されます。
各コンポーネントのショートカットキーの数を制限できる最大インターフェイスもあります。

  addHotkey(データ) {
   this.list.length && this.list.some(item => data.text === item.text) の場合、戻り値は次のようになります。
   this.list.length && this.list.length.toString() === this.max.toString() の場合、戻り値は次のようになります。
   if (!this.verify(data)) が返されます;
   this.list.push(データ);
  }