資訊專欄INFORMATION COLUMN
摘要：如果我們的項(xiàng)目中沒有用到任何框架的話，為了更好的用戶體驗(yàn)，肯定會(huì)用到和。那么我們就自定義這兩個(gè)組件吧。組件首先，在下新建文件夾，存放我們的和兩個(gè)文件當(dāng)然文件的具體位置你可以自行安排。最后，只需在要用的地方
如果我們的Vue項(xiàng)目中沒有用到任何UI框架的話，為了更好的用戶體驗(yàn)，肯定會(huì)用到loading和toast。那么我們就自定義這兩個(gè)組件吧。
1、Toast組件
首先，在common下新建global文件夾，存放我們的toast.vue和toast.js兩個(gè)文件（當(dāng)然文件的具體位置你可以自行安排）。
(1). toast.vue
{content}
(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
