先日、以下のような記事を書いた。
実際、このようなコンポーネントを開発して、動かせる場所があるといいと思ったので、Github Pages でページを作成した。 なお、公開には gh-pages を利用した。
以下、記事執筆時点で記載している2コンポーネントについて簡単に説明
OneClickButton.vue
以下の記事の内容から名前を変えただけ。
EventMessageBoard.vue
メッセージを追加してから、一定時間後にメッセージが消えてくれるようなコンポーネント。
イベント（遅延処理やエラーなど）の完了後、これを一時的にユーザーに通達したいようなケースで利用することを想定している。
以下のような仕組みで実装した。
- 利用時に
refを使って、コンポーネント利用者が特定のオブジェクトを参照可能にする (あまりrefは使いたくなかったが...もっと良い方法があれば...) - イベント発火時に
this.$refs.__参照名__.add(message);のようにして通達すると、コンポーネント側で値を自動追加し、同時にTimeoutで一定時間後にメッセージを削除するイベントを追加する - transition によってある程度アニメーション付きで消えるようにする
苦労した点としては単体テストで setTimeout をどう扱うかだったが、これは jest が setTimeout をテストするための仕組みを持っていたので、これをうまく使うことで解決できた。