(七)系統通用元件編寫

訊息提示

頁面很多地方會用到訊息提醒的功能，如儲存成功、失敗、刪除等。 這裡使用mu-snackbar元件，並使用vuex做全域性的管理。

在vuex中增加sys.js檔案，增加一個message狀態：

const state = {
  message: {}
};
複製程式碼

然後增加actions如下：

setMessage({ commit }, { type, message }) {
    commit("SET_MESSAGE", {
      type, // 訊息型別
      message, // 訊息內容
      date: Date.now()
    });
  }
複製程式碼

在元件中增加Message.vue檔案，主要通過監聽message來觸發訊息提醒。

部分程式碼如下：

methods: {
    showMsg(type, msg) {
      if (this.color.timer) clearTimeout(this.color.timer);
      this.color.color = type;
      this.color.message = msg;
      this.color.open = true;
      this.color.timer = setTimeout(() => {
        this.color.open = false;
      }, this.color.timeout);
    }
  },
watch: {
    message: {
      handler: function(v) {
        this.showMsg(v.type, v.message);
      },
      deep: true
    }
  }
複製程式碼

然後將此元件引入到主檔案App.vue中即可。 呼叫的時候就可以通過vuex的setMessage來觸發。

確認對話方塊

確認元件也是比較常用的，如刪除前確認等，我們也可以將其封裝成單獨的元件來呼叫。

muse-ui中提供了mu-dialog對話方塊，我們可以直接在此元件的的基礎上進行封裝。

<template>
    <mu-dialog :title="title" width="400" max-width="80%" :esc-press-close="true" :overlay-close="false" :open.sync="openAlert">
    {{content}}
    <mu-button slot="actions" flat @click="clickBtn(false)">{{btnCancel}}</mu-button>
    <mu-button slot="actions" flat color="primary" @click="clickBtn(true)">{{btnConfirm}}</mu-button>
  </mu-dialog>
</template>
<script>
export default {
  data() {
    return {
      title: "",
      content: "",
      btnCancel: "取消",
      btnConfirm: "確認",
      openAlert: false,
      flag: false,
      callback: function() {}
    };
  },
  methods: {
    show(opt, cb) {
      this.title = opt.title || "訊息確認";
      this.content = opt.content;
      opt.cancelBtnText ? (this.btnCancel = opt.cancelBtnText) : "";
      opt.confirmBtnText ? (this.btnConfirm = opt.confirmBtnText) : "";
      cb ? (this.callback = cb) : "";
      this.openAlert = true;
    },
    clickBtn(flag) {
      this.flag = flag;
      this.openAlert = false;
      this.callback(flag);
    }
  }
};
</script>

複製程式碼

呼叫的時候就可以直接通過呼叫show方法來使用，並傳回回撥，來確認是點選了確定還是取消。

載入loading

載入動畫是比較簡單的，使用mu-circular-progress,直接通過vuex來控制，通過一個狀態，在每個請求之前和之後呼叫顯示和隱藏就可以了。

在元件中增加Loading.vue並引入到App.vue中。 元件程式碼如下：

<template>
    <div class="loading" v-show="loading">
        <mu-circular-progress class="circ" :size="48"></mu-circular-progress>
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      loading: ({ sys }) => sys.loading
    })
  }
};
</script>
<style lang="scss" scoped>
.loading {
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: 2000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  .circ {
    left: 50%;
    top: 40%;
  }
}
</style>

複製程式碼

這樣通過改變loading為true或false就可以顯示和隱藏載入動畫。

儲存文章的呼叫例子

async createPost({ dispatch }, post) {
    dispatch("setLoading", true); // 顯示loading
    let { data } = await Axios.post("blog/post", post);
    let id = "";
    if (!data.errmsg) {
      dispatch("setMessage", { type: "success", message: "儲存成功" }); // 顯示儲存成功訊息提醒
      id = data.data;
    } else {
     // 顯示儲存失敗訊息提醒
      dispatch("setMessage", {
        type: "error",
        message: data.errmsg || "儲存失敗"
      });
    }
    dispatch("setLoading", false); // 隱藏loading
    return id;
  },
複製程式碼