사용자에게 잘못된 Vue를 전달합니다.js 구성 요소를 만들었습니다.

이런 느낌this.$teller으로 catch드리면 사용자에게 잘못된 내용을 전달하고 싶은 구성 요소를 적어 봤습니다.
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()
},

Github

Demo

Argument의 종류

세 가지 형식을 구상했다.

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"
})

개요 해설

구성 요소 읽기Vue.extend를 통해

new를 사용하여 새 인스턴스 생성

$mount 마운트

옵션 등을 설정하여 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 본체의 메일입니다.js

JavaScript 변수 유형을 판단하는 코드가 많습니다.예를 들어'진짜 Object인가요?''정규 표현식이에요?'잠깐만요.

사용상 주의

계획은 파괴적인 변경과 함께 수정되기 때문에 issue를 확인하는 동시에 사용하세요.
※ 이 기사의 코드는 자바스크립트 관점에서 보면 좋지 않을 수 있습니다.시골의 프리랜서라 자세한 사람에게 물어볼 수 없으니 공개 코드를 쓰는 것이 올바른 수법인지 양해해 주십시오.마음대로 말씀해 주시면 기쁘겠습니다.(2018년 이 의견 취소)

총결산

vue는 간단하지만 웹 페이지와 롤러는 어려워

ElementUI 코드가 멋지다