JavaScript
Vue.js
Vuetify

[Vue]行動予定表のサンプルを作ってみた。


概要

前回、「blurイベントで特定のボタンだけでイベントをキャンセルするのに、event.relatedTargetが使えなかったとき。」 という記事で作ったものの動くサンプルをcodepenで晒してみよう。作っていたものは、ホワイトボード製で良くある行動予定表です。


環境



  • CODEPENで書きなおしました。前回記事とメソッド名などに若干違いがあるかも。

  • 外のサーバには繋いでいませんのでリロードするとデータが消えますが、怒らないでください。


仕様


  • この会社には、幾つか支店があるとする。

  • 支店ごとに社員名、予定が表示される。

  • 名前か予定をクリック(タップ)すると予定を編集できる。

  • 編集時に簡単に入力できるボタンを設ける。とりあえず「Meeting」がボタンで入力できる。

  • UIに大きく変化はないが、PCでもモバイルでもなんとなく入力はできるようにする。


使い勝手を改善する

前回の記事で、モバイルから使った時のボタンのイベントが飛ばない、で悩みましたが、この対応をしたことで、編集状態からTABでフォーカスアウトするとボタンに移るので、blurイベントがキャンセルされてしまいます。そこで、TABによるフォーカス移動自体をキャンセルしてみることにしました。


code1.js

<v-text-field v-model="user.task" @keyup.enter="updateTask($event,user)" @keydown.tab="updateTask(null,user)" @blur="updateTask($event,user)" :ref="'edit' + user.id" :placeholder="user.name + 'さんの予定を入力'" single-line outline hide-details />


上記のように、@keydown.tabを追加し、@touchstart後の処理と同じような動きにして、TABしたら強制的に編集終了にしました。


コード


  • こちらになります。

  • モバイルではフルで触った方が想定通り動くかも。


See the Pen
destination-board
by loopsketch (@loopsketch)
on CodePen.


最後に


  • 何か誤りがあったら教えてください。出来る範囲で直します。

  • Vue.jsもVuetifyも、ちゃっちゃとプロトタイプを作るのにいいですね。

  • CODEPENも便利だなー。

  • サーバ側も無料で使えるものがありそうなので、機会があったら晒してみますか。


参考

blurイベントで特定のボタンだけでイベントをキャンセルするのに、event.relatedTargetが使えなかったとき。