Help us understand the problem. What is going on with this article?

エラーをユーザーへ伝える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 のコードがかっこいい
akifo
フリーランスの JavaScript エンジニアです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした