如果我們的Vue項目中沒有用到任何UI框架的話，為了更好的用戶體驗，肯定會用到loading和toast。那么我們就自定義這兩個組件吧。

1、Toast組件

首先，在common下新建global文件夾，存放我們的toast.vue和toast.js兩個文件（當然文件的具體位置你可以自行安排）。

(1). toast.vue

<template lang="html"> <div v-if="isShowToast" class="toast-container" @touchmove.prevent>  <!-- 這里content為雙花括號 -->  <span class="loading-txt">{content}</span> </div></template><script>export default { data () {  return {   isShowToast: true,   content: ''  } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.toast-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1);}.toast-msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; padding: 35px; border-radius: 10px; font-size: 28px; line-height: 36px; background: #eee; color: #666;}</style>

(2). toast.js

import Vue from 'Vue'import ToastComponent from './Toast.vue'const Toast = {}let showToast = false // 存儲loading顯示狀態let toastNode = null // 存儲loading節點元素const ToastConstructor = Vue.extend(ToastComponent)Toast.install = function (Vue, options) { // 參數 var opt = {  duration: '1200' } for (var property in options) {  opt[property] = options[property] } Vue.prototype.$toast = function (tips, type) {  if (type === 'hide') {   toastNode.isShowToast = showToast = false  } else {   if (showToast) {    // 如果toast還在，則不再執行    return   }   toastNode = new ToastConstructor({    data: {     isShowToast: showToast,     content: tips    }   })   toastNode.$mount() // 掛在實例，為了獲取下面的toastNode.$el   document.body.appendChild(toastNode.$el)   toastNode.isShowToast = showToast = true   setTimeout(function () {    toastNode.isShowToast = showToast = false   }, opt.duration)  } }; ['show', 'hide'].forEach(function (type) {  Vue.prototype.$toast[type] = function (tips) {   return Vue.prototype.$toast(tips, type)  } })}export default Toast

然后，我們需要把寫好的組件在 /src/main.js 中引用一下。

import Toast from './components/common/global/toast'Vue.use(Toast)

最后，怎么使用呢？只需在要用的地方this.$toast.show('hello world')

2、Loading組件

loading組件只需要照著toast組件搬過來，稍微改下就可以了。

首先，在common下新建global文件夾，存放我們的loading.vue和loading.js兩個文件。

(1). loading.vue

<template lang="html"> <div v-if="isShowLoading" class="loading-container">  <div class="loading-box">   <img class="loading-img" :src="require('../../../assets/images/loading.png')">   <!-- 這里content為雙花括號 -->   <span class="loading-txt">{content}</span>  </div> </div></template><script>export default { data () {  return {   isShowLoading: false,   content: ''  } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.loading-container { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); z-index: 1000;}.loading-box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 150px; height: 150px; border-radius: 10px; background: #e5e5e5;}.loading-img { width: 70px; height: 70px; animation: rotating 2s linear infinite;}@keyframes rotating { 0% {  transform: rotate(0deg); } 100% {  transform: rotate(1turn); }}.loading-txt { display: flex; justify-content: center; align-items: center; font-size: 24px; color: #666;}</style>