Vue自定義全局Toast和Loading的實(shí)例詳解

更新時(shí)間：2019年04月18日 09:32:05 作者：darkerXi

這篇文章主要介紹了Vue自定義全局Toast和Loading,需要的朋友可以參考下

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

1、Toast組件

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

(1). toast.vue

<template lang="html">
 <div v-if="isShowToast" class="toast-container" @touchmove.prevent>
  <!-- 這里content為雙花括號(hào) -->
  <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 // 存儲(chǔ)loading顯示狀態(tài)
let toastNode = null // 存儲(chǔ)loading節(jié)點(diǎn)元素
const ToastConstructor = Vue.extend(ToastComponent)

Toast.install = function (Vue, options) {
 // 參數(shù)
 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還在，則不再執(zhí)行
    return
   }
   toastNode = new ToastConstructor({
    data: {
     isShowToast: showToast,
     content: tips
    }
   })
   toastNode.$mount() // 掛在實(shí)例，為了獲取下面的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兩個(gè)文件。

(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為雙花括號(hào) -->
   <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.js

import Vue from 'Vue'
import LoadingComponent from './Loading.vue'

const Loading = {}
let showLoading = false // 存儲(chǔ)loading顯示狀態(tài)
let loadingNode = null // 存儲(chǔ)loading節(jié)點(diǎn)元素
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還在，則不再執(zhí)行
    return
   }
   loadingNode = new LoadingConstructor({
    data: {
     isShowLoading: showLoading,
     content: tips
    }
   })
   loadingNode.$mount() // 掛在實(shí)例，為了獲取下面的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()

總結(jié)

以上所述是小編給大家介紹的Vue自定義全局Toast和Loading的實(shí)例詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: