如果我们的Vue项目中没有用到任何UI框架的话，为了更好的用户体验，肯定会用到loading和toast。那么我们就自定义这两个组件吧。
成都创新互联专注于中大型企业的成都网站制作、网站建设和网站改版、网站营销服务，追求商业策划与数据分析、创意艺术与技术开发的融合，累计客户上千余家，服务满意度达97%。帮助广大客户顺利对接上互联网浪潮，准确优选出符合自己需要的互联网运用，我们将一直专注成都品牌网站建设和互联网程序开发，在前进的路上，与客户一起成长！
1、Toast组件
首先，在common下新建global文件夹，存放我们的toast.vue和toast.js两个文件（当然文件的具体位置你可以自行安排）。
(1). toast.vue
{content}
(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
{content}
(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的实例详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！