0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-06-12

概要

前回、「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が使えなかったとき。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?