inputやtextareaの入力中に、ちょっとした入力ヒントを出したい時があります。
そんな時に便利な、focusで出る吹き出しをVue.jsで実装します。
実装デモ
See the Pen Input Balloon by Vue.js - flow3 by Shoko Oyamada (@chcltn) on CodePen.
吹き出しの実装の流れ
1. 単純な吹き出しをHTMLとCSSで作る
2. focusとblurでv-showを切り替える
3. 吹き出し内のリンクもクリック出来るようにする
1.単純な吹き出しをHTMLとCSSで作る
ごく単純な吹き出しをHTMLとCSSで実装します。
ここではまだ吹き出しは最初から表示されており、focus時の動きはありません。
See the Pen Input Balloon by Vue.js - flow1 by Shoko Oyamada (@chcltn) on CodePen.
2.focusとblurでv-showを切り替える
フラグとなる変数 isFocusedをdata内に作っておきます。
この変数を、inputにfocus/blurした時にtrue/falseで切り替わるようにします。
methodでそのisFocusedをtrueにするメソッドopenBalloonを作ります。
同様にfalseにするcloseBalloonも記述します。
この2つのメソッドを、HTML側で、inputのv-onディレクティブで呼び出すようにしています。
そして、input-balloonは、v-showでisFocusedがtrueのときのみ表示させるようにします。
See the Pen Input Balloon by Vue.js - flow2 by Shoko Oyamada (@chcltn) on CodePen.
（v-ifでも実装可能ですが、吹き出しは表示切り替え頻度が高いコンポーネントであることから、ここではv-showが良いでしょう）
3.吹き出し内のリンクもクリック出来るようにする
正直なところ、上記だけであればVueで実装する必要はなく、CSSのみで作ることができます。input:focusのように擬似クラスを使います。
しかしながら実際のアプリケーション開発の現場では、この吹き出し内にリンクなど貼りたいことがあるでしょう。
以下では、リンクをクリックしても（つまり、blurしても）吹き出しが閉じないようにしています。
まず、HTML側ではbackdropというdivを用意します。
それをCSSでposition:fixedのopacity:0に設定しましょう。
透明なため目には見えませんが、このbackdropは画面全体に描写されます。
先ほどinputのblurに設定したcloseBalloonというメソッドを、このbackdropに移動します。（同時に、blurでなくclickにします）
また、このbackdropもv-showでfocus時のみ現れるようにしておきます。
See the Pen Input Balloon by Vue.js - flow3 by Shoko Oyamada (@chcltn) on CodePen.
これで、ごくシンプルな吹き出しがVueで実装できました。
お疲れ様でした。