vue.js

エラーをユーザーへ伝えるVue.jsコンポーネント作りました

More than 1 year has passed since last update.

こんな感じで this.$tellercatch に渡せば、ユーザーへエラー内容を伝えてくれるコンポーネントが欲しいと思い書いてみました。

Promise
SomePromiseTask()
  .then()
  .catch(this.$teller)
AsyncAwait
clickedBtn () {
  this.handleTasks()
    .then(()
    .catch(this.$teller)
},
handleTasks: async function () {
  await this.taskA()
  await this.taskB()
  await this.taskC()
  await this.taskD()
},

9e2564bc5e43f12c8a196732fc7733bf.gif

Argument の種類

3種類の形式を想定しています。

  • String
  • Error
  • Object
String
this.$teller("message")
Error
this.$teller(new Error("message"))
this.$teller(new SyntaxError("message"))
Object
this.$teller({
  "type": "error",
  "title": "title",
  "message": "message",
  "duration": 3000,
  "position": "top-right"
})

ざっくりコード解説

  1. コンポーネントを Vue.extend で読み込む
  2. new を使って新しいインスタンスを作る
  3. $mount でマウントする
  4. オプションなどを設定して、DOMへ表示させる
コード適当に抜き出し
const ErrorMessageConstructor = Vue.extend(ErrorHMessageComponent)
const instance = new ErrorMessageConstructor()
instance.vm = instance.$mount()
document.body.appendChild(instance.vm.$el)

参考にしたリポジトリ

Element

awesome-vue にある notification(toast) 系のコードを全て読んだ結果、この Element が一番参考になりました。コードの書き方が洗練されていますし、本当に考えられて書かれているUIツールキットです。コンポーネントの作り方を学習されたい方にオススメしたいです。

Vue.js本体の util.js

JavaScript の変数の型判定をするコードがたくさんあります。例えば「本当にObjectか?」「正規表現か?」など。

vue-teller 使用上の注意

破壊的な変更を伴う修正を行う予定ですので、issueなどご確認いただきながらご利用頂ければと思います。

※ この記事・コードは JavaScript 的に、よろしくない可能性があります。田舎のフリーランスでして、詳しい人に聞くことができないため、公開コードを書くことで正しい手法なのか確認も兼ねていますことをご了承ください。お気軽にご指摘頂けますと嬉しいです。(2018年に、このコメント消します)

まとめ

  • vue は簡単だけど、webpack や rollup が難しい
  • ElementUI のコードがかっこいい