:::

14-7-3 整合一般npm套件 plugin

  1. 先安裝此套件 https://www.npmjs.com/package/vue-notification (要有支援SSR的套件才不會有問題)
    npm install --save vue-notification
  2. 建立/plugins/notification.js
    import Vue from "vue";
    // for SPA:
    // import Notifications from 'vue-notification'
    // for SSR:
    import Notifications from "vue-notification/dist/ssr.js";
    
    Vue.use(Notifications);
    

     

  3. 加到 nuxt.config.js 設定
    plugins: ["~/plugins/hello.js", "~/plugins/axios.js","~/plugins/notification.js"],

     

  4. 將套件載入語法<notifications group="foo" />加到每頁都會執行到的地方,如:layouts\default.vue
    <template>
      <div>
        <Nav />
        <!-- 主畫面 -->
        <div class="container">
          <div class="row">
            <!-- 主內容區 -->
            <div class="col-md-9">
              <Nuxt />
              <notifications group="foo" />
            </div>
            <!-- 側邊欄 -->
            <div class="col-md-3">
              <Aside />
            </div>
          </div>
        </div>
    
      </div>
    </template>
    

     

  5. 接著加入方法
      methods: {
        handNotify() {
          this.$notify({
            group: "foo",
            title: "Important message",
            text: "Hello user! This is a notification!",
          });
        }
      },

     

  6. 加個按鈕以呼叫該方法
    <template>
      <div>
        <h1>關於</h1>
        <button @click="handNotify">按我</button>
      </div>
    </template>

     

  7. 由於該套件的CSS是放在src/Notifications.vue中,無法被plugin讀取,所以,從中取出CSS,並另存至assets\notification.css
    
    .vue-notification-group {
      display: block;
      position: fixed;
      z-index: 5000;
    }
    .vue-notification-wrapper {
      display: block;
      overflow: hidden;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    .notification-title {
      font-weight: 600;
    }
    .vue-notification-template {
      display: block;
      box-sizing: border-box;
      background: white;
      text-align: left;
    }
    .vue-notification {
      display: block;
      box-sizing: border-box;
      text-align: left;
      font-size: 12px;
      padding: 10px;
      margin: 0 5px 5px;
      color: white;
      background: #44A4FC;
      border-left: 5px solid #187FE7;
    }
    .vue-notification.warn {
      background: #ffb648;
      border-left-color: #f48a06;
    }
    .vue-notification.error {
      background: #E54D42;
      border-left-color: #B82E24;
    }
    .vue-notification.success {
      background: #68CD86;
      border-left-color: #42A85F;
    }
    .vn-fade-enter-active, .vn-fade-leave-active, .vn-fade-move  {
      transition: all .5s;
    }
    .vn-fade-enter, .vn-fade-leave-to {
      opacity: 0;
    }
    

     

  8. 接著在nuxt.config.js中加入CSS設定
    css: ['~/assets/notification.css'],

     

  9.  

:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1882

計數器

今天: 2553255325532553
昨天: 3755375537553755
總計: 4458392445839244583924458392445839244583924458392