XOOPS輕鬆架 - 線上書籍

:::

Vue.js 3.0 筆記
=============

1. 先安裝此套件 <https://www.npmjs.com/package/vue-notification> （要有支援SSR的套件才不會有問題） 
  ```bash
  npm install --save vue-notification
  ```
2. 建立/plugins/notification.js 
  ```javascript
  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 設定 
  ```javascript
  plugins: ["~/plugins/hello.js", "~/plugins/axios.js","~/plugins/notification.js"],
  ```
4. 將套件載入語法<notifications group="foo" />加到每頁都會執行到的地方，如：layouts\\default.vue 
  ```markup
  <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. 接著加入方法 
  ```javascript
    methods: {
      handNotify() {
        this.$notify({
          group: "foo",
          title: "Important message",
          text: "Hello user! This is a notification!",
        });
      }
    },
  ```
6. 加個按鈕以呼叫該方法 
  ```markup
  <template>
    <div>
      <h1>關於</h1>
      <button @click="handNotify">按我</button>
    </div>
  </template>
  ```
7. 由於該套件的CSS是放在src/Notifications.vue中，無法被plugin讀取，所以，從中取出CSS，並另存至assets\\notification.css 
  ```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設定 
  ```javascript
  css: ['~/assets/notification.css'],
  ```
9.

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1882

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器