ページ上でショートカットキーをカスタマイズする要件に遭遇し、ショートカットキーを設定して表示する場所が必要になりました。Element UI を調べてみたところ、少し変更するだけで使用できるコンポーネントがなかったので、自分で作成しました。 効果は以下のとおりです。 要点入力のように見えますが、実際にはコンポーネント内にラベル効果が表示され、削除ボタンも必要です。これには、入力ボックスに 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(データ) { 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のその他の関連記事にも注目してください! 以下もご興味があるかもしれません:
|
<<: Vueはvue-quill-editorリッチテキストエディタを使用し、画像をサーバーにアップロードします。
>>: Vue コンポーネントはどのように解析され、レンダリングされるのでしょうか?
この記事では、マウス追従ゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内...
1. ダウンロードしたMySQLの圧縮パッケージをインストールディレクトリに解凍します。 2. 新し...
CHAR 型と VARCHAR 型は似ていますが、主に格納場所、末尾のスペース、取得方法が異なります...
Vueのメソッドとプロパティ1. 方法使用法 1メソッド: {メソッド名: function(){}...
CAST関数前回の記事では、型変換を表示するために使用する CAST 関数について説明しました。暗黙...
目次1. シナリオ2. IJavaScriptShadowboxを実装する2.1 メインスレッドの実...
Django Web開発の過程で、HTMLを書く際にバックエンドから同じ名前のリスト変数が渡されるが...
非直交マージンマージンを使用するとマージが発生します次のプロパティはマージンの結合を防止します。国境...
みなさんこんにちは。今日は、MySQL 8.0.22 のインストールと構成について学習します。注意深...
1. 前提条件何度かインストールしているので、エラーについてはこれ以上説明しません。ちょっとわかりに...
目次クロスドメインの理由JSONP Nginxソリューションバックエンドソリューションクロスドメイン...
メインライブラリのバイナリログ: # 2420 で #170809 17:16:20 サーバー ID...
目次バッチコピー copyWithin()配列を埋めるメソッド fill()指数の計算方法については...
環境Linux 3.10.0-693.el7.x86_64 Docker バージョン 18.09.0...
序文レイアウトの点では、Gobang はランダムな動きを目的とするゲームよりも実装がはるかに簡単で、...