Vue.js で矢印キーや Enter キーによるキーボード操作が可能なコンテキストメニュー(右クリックメニュー)を表示する方法。
調査/検証 したところ rawilk/vue-context を使うのが一番楽だったので、基本的には vue-context の使い方についてのまとめ。
li.v-context__sub と ul.v-context を使う←, → キーによる階層の移動が可能.v-context li, .v-context li a:hover, .v-context li a:focus あたりで変更Vue.js で入力フォーム フォーカス中に Enter キーで Submit させる方法について整理した。
ほぼ参考サイトの通り。
@keyup.enter を使うと、日本語変換での確定 Enter も対象になる@keypress.enter だと、日本語変換での確定 Enter は発火しないVue.js でキーボード操作で要素間を移動させる方法について整理した。
イメージとしてはツリービューみたいなやつとかを、↑ ↓ → ← キーで移動するような感じ。
tabindex を移動させたい要素に設定@keyup.up.exact, @keyup.down.exact でイベントハンドラを設定tabindex を算出して focus特殊な要件だが、Tippy Instance を生成せずに隠す方法を調べた。
_tippy にインスタンスを保持しているのでそれを利用hide() を実行axios で、添付ファイルありのリクエストを送信する方法を整理した。
【React】axiosを使用してmultipart/form-data形式の通信をする - モノクロタイム を参考にさせてもらった。
FormData の append でデータを構築transformRequest でも対応できるかも？(未検証)FormData はブラウザのみなので、CLI ツールなどは別フォーマットを使う必要がありそうサーバ(Node.js)からプッシュ通知を送信する方法として、firebase-admin を使って簡単なプッシュ通知を送信する方法を整理した。
関連: Vue + Cordova + Firebase でプッシュ通知
GOOGLE_APPLICATION_CREDENTIALS を設定(direnv 使うと便利)initializeApp, Messaging.send でプッシュ通知 送信Vue.js で画像プレビューする方法を整理した。
基本的に たった2ステップ！Vue.js で選択画像をプレビューする方法（サンプルDL可） – console dot log の通り。
<input type="file"> に @change でイベントハンドラを設定FileReader の readAsDataURL で data: url として読み込みdata に data: url を設定<img :src="dataUrl>` のようにバインドして表示Vue + Cordova + Firebase でプッシュ通知を利用する方法を整理した。
※Firebase やプッシュ通知の細かい仕様については詳しくないため、最新/最適 でない方法の可能性があることに注意。
※試行錯誤を経て成功した後に情報を整理しているので、手順漏れや実施タイミングが異なるものなどがあるかもしれないことに注意。
関連: Node.js で firebase-admin を使ってサーバからプッシュ通知
ツールチップを簡単に表示できる atomiks/tippyjs を触る機会があったので、簡単に使い方を整理した。
本記事は tippy v5 系を利用しているので、最新 v6 系(2020/08/01 現在)と挙動や設定が異なる可能性あり
tippy(<target>, { content: 'my tooltip' }) でツールチップを設定<target> はセレクタ(#id など)でも、Node(document.querySelector('#id') など)でも OKcontent に HTML も設定可能tippy(<target>, { content: '<strong>my tooltip</strong>' })tippy(<target>, { content: 'my<br>tooltip', allowHTML: true })theme: 'light のように指定「画像クリックで拡大」を簡単に実現できる imgix/luminous を触る機会があったので、簡単に使い方を整理した。
デモページ を見ると、何ができるのかがすぐわかる。
npm i luminous-lightbox でインストール<script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.2/luminous.min.js"></script><a href="拡大画像"><img src="サムネイル"></a> に対して以下を実行new Luminous(document.querySelector('a'))LuminousGallery を使用new LuminousGallery(document.querySelectorAll('a'))
