微客导航 » 文章资讯 » Vue自定义全局Toast和Loading的实例详解

Vue自定义全局Toast和Loading的实例详解

2023-08-24 11:00:05 332

如果我们的Vue项目中没有用到任何UI框架的话，为了更好的用户体验，肯定会用到loading和toast。那么我们就自定义这两个组件吧。

1、Toast组件

首先，在common下新建global文件夹，存放我们的toast.vue和toast.js两个文件（当然文件的具体位置你可以自行安排）。

(1).toast.vue




{content}

.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; }

(2).toast.js

importVuefrom'Vue'
importToastComponentfrom'./Toast.vue'

constToast={}
letshowToast=false//存储loading显示状态
lettoastNode=null//存储loading节点元素
constToastConstructor=Vue.extend(ToastComponent)

Toast.install=function(Vue,options){
//参数
varopt={
duration:'1200'
}
for(varpropertyinoptions){
opt[property]=options[property]
}
Vue.prototype.$toast=function(tips,type){
if(type==='hide'){
toastNode.isShowToast=showToast=false
}else{
if(showToast){
//如果toast还在，则不再执行
return
}
toastNode=newToastConstructor({
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){
returnVue.prototype.$toast(tips,type)
}
})
}

exportdefaultToast

然后，我们需要把写好的组件在/src/main.js中引用一下。

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

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

2、Loading组件

loading组件只需要照着toast组件搬过来，稍微改下就可以了。

首先，在common下新建global文件夹，存放我们的loading.vue和loading.js两个文件。

(1).loading.vue






{content}

.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:rotating2slinearinfinite; } @keyframesrotating{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(1turn); } } .loading-txt{ display:flex; justify-content:center; align-items:center; font-size:24px; color:#666; }

(2).loading.js

importVuefrom'Vue'
importLoadingComponentfrom'./Loading.vue'

constLoading={}
letshowLoading=false//存储loading显示状态
letloadingNode=null//存储loading节点元素
constLoadingConstructor=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=newLoadingConstructor({
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){
returnVue.prototype.$loading(tips,type)
}
})
}

exportdefaultLoading

然后，在/src/main.js中引用一下loading组件。

importLoadingfrom'./components/common/global/loading'
Vue.use(Loading)

最后，只需在要用的地方this.$loading.show('helloworld')、this.$loading.hide()

总结

以上所述是小编给大家介绍的Vue自定义全局Toast和Loading的实例详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

返回顶部
3162201930
czq8825@qq.com

Vue自定义全局Toast和Loading的实例详解

热门推荐

随机推荐