如果我们的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.jsimport 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>(2). loading.jsimport Vue from ‘Vue’import LoadingComponent from ‘./Loading.vue’const Loading = {}let showLoading = false // 存储loading显示状态let loadingNode = null // 存储loading节点元素const LoadingConstructor = Vue.extend(LoadingComponent)Loading.install = function (Vue) { Vue.prototype.$loading = function (tips, type) { if (type === ‘hide’) { loadingNode.isShowLoading = showLoading = false } else { if (showLoading) { // 如果loading还在，则不再执行 return } loadingNode = new LoadingConstructor({ data: { isShowLoading: showLoading, content: tips } }) loadingNode.$mount() // 挂在实例，为了获取下面的loadingNode.$el document.body.appendChild(loadingNode.$el) loadingNode.isShowLoading = showLoading = true } }; [‘show’, ‘hide’].forEach(function (type) { Vue.prototype.$loading[type] = function (tips) { return Vue.prototype.$loading(tips, type) } })}export default Loading然后，在/src/main.js中引用一下loading组件。import Loading from ‘./components/common/global/loading’Vue.use(Loading)最后，只需在要用的地方this.$loading.show(‘hello world’)、 this.$loading.hide()
...