개요

경고 및 정보를 표시하는 라이브러리Pnotify는 Vue입니다.js에서 사용할 때의 설정 노트입니다.
정보 디스플레이 등은 어느 화면에서든 사용할 수 있는 처리이기 때문에mixin을 사용하여 어느 화면에서든 호출할 수 있다고 정의했다.

환경

Vue.js 2.6.10

Pnotify 4.0.0

라이브러리 배포

다음 명령으로 설치 가능

npm install --save pnotify

mixin 설정 사용하기

우선 사용하고 싶은 공통된 방법을 만들어라.notifyNotice 알림 메시지를 표시하기 위해 호출합니다.
pnotify-custom.js

import PNotify from "../node_modules/pnotify/dist/umd/PNotify.js";
import PNotifyButtons from "../node_modules/pnotify/dist/umd/PNotifyButtons.js";

export default new class {
  constructor() {
    this.defaultOptions = {
      delay: 2000,
      modules: {
        Buttons: {
          sticker: false
        }
      }
    };
  }

  notifyNotice(title, text) {
    title ? this._notify(title, text) : this._notifyNoTitle(text);
  }
  _notify(title, text, type = "notice") {
    PNotify.alert({
      type,
      title,
      text,
      delay: this.defaultOptions.delay,
      modules: this.defaultOptions.modules
    });
  }
  _notifyNoTitle(text, type = "notice") {
    PNotify.alert({
      type,
      text,
      delay: this.defaultOptions.delay,
      modules: this.defaultOptions.modules
    });
  }
}();

mixin으로 읽는 파일
common.js

import notify from "./pnotify-custom.js";

export default {
  methods: {
    notifyNotice(title, text) {
      notify.notifyNotice(title, text);
    }
  }
};

가상 인스턴스 선언 위치
mixin으로 방금 읽은 것common.jsmain.js

import Vue from 'vue'
import App from './App.vue'
import "../node_modules/pnotify/dist/PNotifyBrightTheme.css";
import common from "./common.js";

Vue.mixin(common);

new Vue({
  render: h => h(App),
}).$mount('#app')

호출 예제this.notifyNotice([タイトル],[メッセージ]) 호출 가능
APP.vue

<template>
  <div id="app">
    <h1>Pnotify</h1>
    <button @click="onNotify">タイトルなし</button>
    <button @click="onNotifyTitle">タイトルあり</button>
  </div>
</template>

<script>
export default {
  name: "app",
  methods: {
    onNotify() {
      this.notifyNotice(undefined, "テスト[タイトルなし]");
    },
    onNotifyTitle() {
      this.notifyNotice("タイトル", "テスト[タイトルあり]");
    }
  }
};
</script>

<style>
</style>

이렇게 나와요.

총결산

Pnotify는 풍부한 메시지 대화상자를 간단하게 사용할 수 있기 때문에 추천하는 라이브러리입니다.
이러한 메시지를 표시할 수 있을 뿐만 아니라, 등록에서 공동으로 사용하는 처리 정의도 종합할 수 있다
나는 믹스 개발을 잘 사용할 수 있다면 상당히 진전될 것이라고 생각한다.