はじめに

Vue.js で矢印キーや Enter キーによるキーボード操作が可能なコンテキストメニュー(右クリックメニュー)を表示する方法。

調査/検証 したところ rawilk/vue-context を使うのが一番楽だったので、基本的には vue-context の使い方についてのまとめ。

TL;DR

  • rawilk/vue-context だとキーボード操作にデフォルトで対応
  • ネストは li.v-context__subul.v-context を使う
    • , キーによる階層の移動が可能
  • スタイルは .v-context li, .v-context li a:hover, .v-context li a:focus あたりで変更
続きを読む

はじめに

Vue.js で入力フォーム フォーカス中に Enter キーで Submit させる方法について整理した。

ほぼ参考サイトの通り。

TL;DR

  • 単純に @keyup.enter を使うと、日本語変換での確定 Enter も対象になる
  • @keypress.enter だと、日本語変換での確定 Enter は発火しない
  • 組み合わせてフラグ管理することで実現
続きを読む

はじめに

Vue.js でキーボード操作で要素間を移動させる方法について整理した。

イメージとしてはツリービューみたいなやつとかを、 キーで移動するような感じ。

TL;DR

  • tabindex を移動させたい要素に設定
  • @keyup.up.exact, @keyup.down.exact でイベントハンドラを設定
  • ハンドラ内で次要素の tabindex を算出して focus
続きを読む

はじめに

特殊な要件だが、Tippy Instance を生成せずに隠す方法を調べた。

TL;DR

続きを読む

はじめに

NativeScript + Firebase でプッシュ通知を行う方法。

TL;DR

続きを読む

はじめに

Vue.js を使ってネイテイブアプリの開発が可能な NativeScript-Vue について整理した。

セットアップから、Vue Router を使ったページ遷移、モーダルの表示などについて。

続きを読む

はじめに

Vue.js で画像プレビューする方法を整理した。

基本的に たった2ステップ!Vue.js で選択画像をプレビューする方法(サンプルDL可) – console dot log の通り。

TL;DR

  • <input type="file">@change でイベントハンドラを設定
  • イベントハンドラ内で FileReaderreadAsDataURLdata: url として読み込み
  • 読み込み完了したら Vue の datadata: url を設定
  • <img :src="dataUrl>` のようにバインドして表示
続きを読む

はじめに

Laravel の Form::select で空の選択肢ありのセレクトボックスを出す方法をまとめた。

TL;DR

続きを読む

r17n


Softwear Engineer


Fukuoka