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 コンポーネントはどのように解析され、レンダリングされるのでしょうか?

推薦する

マウス追従ゲームを実現するjs

この記事では、マウス追従ゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内...

最新のmysql-5.7.21のインストールと設定方法

1. ダウンロードしたMySQLの圧縮パッケージをインストールディレクトリに解凍します。 2. 新し...

MYSQL における char と varchar の違い

CHAR 型と VARCHAR 型は似ていますが、主に格納場所、末尾のスペース、取得方法が異なります...

Vueのメソッドとプロパティの詳細な説明

Vueのメソッドとプロパティ1. 方法使用法 1メソッド: {メソッド名: function(){}...

MySQLの明示的な型変換の簡単な分析

CAST関数前回の記事では、型変換を表示するために使用する CAST 関数について説明しました。暗黙...

WebWorkerはJavaScriptサンドボックスの詳細をカプセル化します

目次1. シナリオ2. IJavaScriptShadowboxを実装する2.1 メインスレッドの実...

HTML における if 判断の使用

Django Web開発の過程で、HTMLを書く際にバックエンドから同じ名前のリスト変数が渡されるが...

CSSブロッキングマージとその他の効果についての簡単な説明

非直交マージンマージンを使用するとマージが発生します次のプロパティはマージンの結合を防止します。国境...

非常に詳細な MySQL8.0.22 のインストールと設定のチュートリアル

みなさんこんにちは。今日は、MySQL 8.0.22 のインストールと構成について学習します。注意深...

CentOS8 デプロイメント LNMP 環境で mysql8.0.29 をコンパイルしてインストールする方法の詳細なチュートリアル

1. 前提条件何度かインストールしているので、エラーについてはこれ以上説明しません。ちょっとわかりに...

ウェブ開発におけるクロスドメインの理由に対する複数のソリューション

目次クロスドメインの理由JSONP Nginxソリューションバックエンドソリューションクロスドメイン...

MySQL マスターライブラリ binlog (master-log) とスレーブライブラリ relay-log 間のコードの詳細な説明

メインライブラリのバイナリログ: # 2420 で #170809 17:16:20 サーバー ID...

ES6 配列のコピーおよびフィルメソッド copyWithin() および fill() の具体的な使用法

目次バッチコピー copyWithin()配列を埋めるメソッド fill()指数の計算方法については...

ホストNginx + Docker WordPress Mysqlを設定するための詳細な手順

環境Linux 3.10.0-693.el7.x86_64 Docker バージョン 18.09.0...

VUE+CanvasはシンプルなGobangゲームの全プロセスを実現します

序文レイアウトの点では、Gobang はランダムな動きを目的とするゲームよりも実装がはるかに簡単で、...