這篇文章給大家介紹一個(gè)vue全局提示框組件，具體代碼如下所示：
創(chuàng)新互聯(lián)建站"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機(jī)版的企業(yè)網(wǎng)站。實(shí)現(xiàn)跨屏營(yíng)銷，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動(dòng)網(wǎng)絡(luò)一網(wǎng)打盡，滿足企業(yè)的營(yíng)銷需求！創(chuàng)新互聯(lián)建站具備承接各種類型的做網(wǎng)站、網(wǎng)站制作項(xiàng)目的能力。經(jīng)過十載的努力的開拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶的一致好評(píng)。
{{message}}
toast.js
重慶分公司
重慶分公司
import ToastComponent from './toast.vue'
const Toast = {};
// 注冊(cè)Toast
Toast.install = function (Vue) {
// 生成一個(gè)Vue的子類
// 同時(shí)這個(gè)子類也就是組件
const ToastConstructor = Vue.extend(ToastComponent)
// 生成一個(gè)該子類的實(shí)例
const instance = new ToastConstructor();
// 將這個(gè)實(shí)例掛載在我創(chuàng)建的div上
// 并將此div加入全局掛載點(diǎn)內(nèi)部
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
// 通過Vue的原型注冊(cè)一個(gè)方法
// 讓所有實(shí)例共享這個(gè)方法
Vue.prototype.$toast = (msg, duration = 1500) => {
instance.message = msg;
instance.visible = true;
setTimeout(() => {
instance.visible = false;
}, duration);
}
}
export default Toast如何使用？
在main.js中
import Vue from 'vue' import Toast from './toast' Vue.use(Toast);
在component中
this.$toast("XXXXXXXXX");總結(jié)
以上所述是小編給大家介紹的vue的全局提示框組件實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
