はじめに
Vue.js でキーボード操作で要素間を移動させる方法について整理した。
イメージとしてはツリービューみたいなやつとかを、↑ ↓ → ← キーで移動するような感じ。
TL;DR
tabindexを移動させたい要素に設定@keyup.up.exact,@keyup.down.exactでイベントハンドラを設定- ハンドラ内で次要素の
tabindexを算出してfocus
Vue.js でキーボード操作で要素間を移動させる方法について整理した。
イメージとしてはツリービューみたいなやつとかを、↑ ↓ → ← キーで移動するような感じ。
tabindex を移動させたい要素に設定@keyup.up.exact, @keyup.down.exact でイベントハンドラを設定tabindex を算出して focus特殊な要件だが、Tippy Instance を生成せずに隠す方法を調べた。
_tippy にインスタンスを保持しているのでそれを利用hide() を実行NativeScript + Firebase でプッシュ通知を行う方法。
multiDexEnabled true を追加
NativeScript でデータの 保存/読み出し を行う方法を整理した。
ApplicationSettings を使うconst appSettings = require("tns-core-modules/application-settings");appSettings.getXXXX, appSettings.setXXXX, appSettings.hasKey, etcVue.js を使ってネイテイブアプリの開発が可能な NativeScript-Vue について整理した。
セットアップから、Vue Router を使ったページ遷移、モーダルの表示などについて。
続きを読むVue.js で画像プレビューする方法を整理した。
基本的に たった2ステップ!Vue.js で選択画像をプレビューする方法(サンプルDL可) – console dot log の通り。
<input type="file"> に @change でイベントハンドラを設定FileReader の readAsDataURL で data: url として読み込みdata に data: url を設定<img :src="dataUrl>` のようにバインドして表示Laravel の Form::select で空の選択肢ありのセレクトボックスを出す方法をまとめた。
['placeholder' => '選択してください'] を追加するprepend('選択してください', '') を使うcollect() などで Collection に要変換ページ中の複数の画像を zip に圧縮してローカルにダウンロードする方法を整理した。
※JavaScript で画像をローカルにダウンロード の続き
await Promise.all() ですべての非同期リクエストが完了したら zip 生成処理を実施folder(), folder.file(), generateAsync() で、zip ファイルの生成createObjectURL → <a href="..." download="xxxx.zip"> → クリック&削除JavaScript で画像をローカルにダウンロードする方法を整理した。
img タグで表示されている画像を JS 実行で保存するような処理を想定。
参考: zip にまとめてダウンロード編: JavaScript で複数画像を zip に圧縮してローカルにダウンロード
XMLHttpRequest でのリクエスト時に responseType = "blob" でリクエストcreateObjectURL でオブジェクト URL を生成a タグの download 属性でファイルを保存revokeObjectURL でオブジェクト URL を開放