溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如果我們的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>
(2). loading.js
import 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()
總結
以上所述是小編給大家介紹的Vue自定義全局Toast和Loading的實例詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
