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で実装できました。
お疲れ様でした。