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

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(データ);
  }

オンラインプレビュー

https://codesandbox.io/s/vue-hotkeyinput-90m2k

以上が、キー表示ショートカットの効果を得るためのVueのInputコンポーネントの実装の詳細です。Vueの表示ショートカットキーの詳細については、123WORDPRESS.COMのその他の関連記事にも注目してください!

以下もご興味があるかもしれません:
  • Vue2.0 折りたたみ可能なリスト v-for ループ表示例
  • Vue+elementUI コンポーネントは、折りたたみ可能な動的レンダリングのマルチレベル サイドバー ナビゲーションを再帰的に実装します。
  • Vue.js の再帰コンポーネントを使用して折りたたみ可能なツリー メニューを実装する (デモ)
  • Vue 折りたたみ表示の複数行テキスト コンポーネントの実装コード

<<:  Vueはvue-quill-editorリッチテキストエディタを使用し、画像をサーバーにアップロードします。

>>:  Vue コンポーネントはどのように解析され、レンダリングされるのでしょうか?

推薦する

uniappを使用してWeChatミニプログラムでEChartsを使用する方法

今日は、uniapp を使用して Echarts を統合し、マップ チャートを表示します。 mpvu...

CSS で text-align と margin: 0 auto を使用して中央に配置する例コード

CSSでtext-align、margin: 0 autoを使用して中央揃えにするtext-alig...

Windows で MySQL マスター スレーブ レプリケーションを構成する方法

MySQL マスター/スレーブ レプリケーションを使用すると、1 つのデータベース (マスター デー...

JavaScriptの無限ループを検出して防止する方法の詳細な説明

目次序文for文の無限ループを修正while文の無限ループを修正要約する序文Js デッド ループはど...

Docker が elasticsearch を起動するときのメモリ不足の問題と解決策

質問Docker が elasticsearch をインストールして起動するときにメモリが不足するシ...

haslaylout と bfc 解析の理解

1. haslayout と bfc は IE 固有の標準属性です。 2. BFC はページ上の分離...

CSSアニメーションでポイント獲得効果を実現するアイデアを詳しく解説

最近のプロジェクトでは、ポイントを集める効果を作成する必要があります。 ボスの説明によると、この効果...

Windows 10 での MySQL 5.7.21 winx64 のインストールと設定方法のグラフィック チュートリアル

mysql 5.7.21 winx64 のインストールと設定方法: MySQLのコミュニティバージョ...

Linux で top コマンドを使用する際のヒント

まず、top のいくつかのフィールドの意味を紹介します。 VIRT:仮想メモリ使用量1. プロセスが...

CSSは座席選択効果を実現するためにautoflow属性を使用する

1. 自動フロー属性、要素コンテンツの長さと幅が要素自体の長さと幅を超える場合、スクロールバーが表示...

MySQL 8.0.15 圧縮版インストール グラフィック チュートリアル

この記事では、参考までにMySQL 8.0.15圧縮版のインストール方法を紹介します。具体的な内容は...

MySQL 学習データベースバックアップの詳細な説明

目次1.DB、DBMS、SQL 2. データベースの特徴3. SQL分類4. MySQLを起動および...

HTML でカスタム画像を使用してチェックボックスを表示する方法

チェックボックスの使用を実装するために画像を使用する必要がある場合は、それを使用して実装できます。実...

CSS calc() の数式に関する詳細な理解

数式 calc() は CSS の関数であり、主に数学演算に使用されます。 calc() を使用する...

Vue はクリックフリップ効果を実現します

参考までに、vueを使用してクリックフリップエフェクトを簡単に実装します。具体的な内容は次のとおりで...