성공 또는 오류 처리 시 알림을 쉽게 실현×vue.js)

vue-toasted는 처리에 성공했을 때의'처리 완료'나 오류가 발생했을 때의'오류 발생'을 간단하게 실현할 수 있는 프로그램 라이브러리입니다.
말하자면 한가운데 아래와 오른쪽 상단에서 신속하게 통지를 보내고 신속하게 숨겨진 것을'토스터'라고 부른다.
그럼 바로 해볼게요.

vue-toasted 설치

잘 설치할게요.

npm install vue-toasted --save

app.js로 가져오기

이 근처는 도서관을 이용할 때의 구정이죠.app.js로 가져오기

import Toasted from 'vue-toasted';

Vue.use(Toasted, {
  position: 'bottom-center',
  duration: 2000,
});

옵션이 공식 페이지에 많아요.
https://www.npmjs.com/package/vue-toasted
vue.js에서 토스터를 호출하는 방법 설명

<template lang="pug">
div.flex.items-center.justify-center.h-screen(@click="sayHello") クリック
</template>
<script>
export default {
  created() {
  },
  computed: {
  },
  props: {
  },
  data() {
    return {
    }
  },
  methods: {
    sayHello:function(){
      this.$toasted.success('hello!');
    }
  }
}
</script>
<style lang='sass' scoped>


</style>

이 이름으로 SayHello라고 부르면 이런 느낌이에요.
(클릭하면 토스터가 나온다.)

대단해!

알림의 색을 바꾸고 싶을 때

예상치 못한 색상을 지정하는 설정이 없는 것 같습니다.
토스터에 클래스를 붙이고 그 반에서!백그라운드 색상을 지정하면 색상을 변경할 수 있는 important이 있습니다.
저는 이렇게 설정했어요.

Vue.use(Toasted, {
  position: 'bottom-center',
  duration: 3000,
  className: ['bg-main', 'text-black', 'font-bold', 'px-16', 'py-4', 'rounded-md']
});

하지만 이렇게 되면 success와 error의 색깔이 모두 변한다.
나에게 있어서 error 때의 통지는 이런 구상이 아니기 때문에 아무런 관계가 없다
만약 또 다른 방법이 있다면, 나는 보충할 것이다!