*主要利用vue.use()方法来安装插件,安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。
当 install 方法被同一个插件多次调用,插件将只会被安装一次。*
import Vue from \'vue\'
import { ToastPlugin, AlertPlugin, ConfirmPlugin, LoadingPlugin } from \'vux\'
/*import { Promise } from \'es6-promise\';*/
Vue.use(ToastPlugin)
Vue.use(AlertPlugin)
Vue.use(ConfirmPlugin)
Vue.use(LoadingPlugin)
const Message = {};
Message.install = () => {
const msg = {
$toast: config => {
let def = {
type:\'text\',
text:\'\'
}
if(typeof config === \'string\' || typeof config === \'number\'){
Vue.$vux.toast.show({type:\'text\',text:config})
}else{
Vue.$vux.toast.show( .assign(def,config))
}
},
$alert: config => {
let def = {
:\'提示\',
content:\'系统异常,请重新登录后再试!\',
buttonText:\'确定\'
}
if(typeof config === \'string\' || typeof config === \'number\'){
Vue.$vux.alert.show( .assign(def,{content:config}));
}else{
Vue.$vux.alert.show( .assign(def,config));
}
},
$confirm: config => {
let isConfirm = false;
let def = {
:\'提示\',
content:\'系统异常,请重新登录后再试!\',
confirmText:\'确定\',
cancelText:\'取消\',
onConfirm:() =>{
isConfirm = true;
}
}
if(typeof config === \'string\' || typeof config === \'number\'){
Vue.$vux.confirm.show( .assign(def,{content:config}));
}else{
Vue.$vux.confirm.show( .assign(def,config));
}
/*return new Promise((resolve,reject) => {
if(isConfirm){
resolve();
}
})*/
},
$showLoading: config => {
let def = {
text: \'加载中...\'
}
if(typeof config === \'string\' || typeof config === \'number\'){
Vue.$vux.loading.show( .assign(def,{text:config}));
}else{
Vue.$vux.loading.show( .assign(def,config));
}
}
}
.entries(msg).forEach(([method,fn]) => {
Vue.prototype[method] = fn;
})
}
Vue.use(Message)
简单将消息弹框封装进vue的原型当中,这样我们在组件中就可以很方便地使用。比如在某个组件中:
this.$alert({
content: \'xxxx\',
onHide() {
this.$router.replace(\'/index/ywbl\');
}
})
这样我们便不用每次都引入相应的ui模块了。
继续阅读与本文标签相同的文章
-
揭秘军运村里的吃、住、行和黑科技!
2026-05-19栏目: 教程
-
75万核心150万线程,UKRI计划新增EPYC Rome超级计算机
2026-05-19栏目: 教程
-
Java B2B2C多用户商城 springcloud架构(二)
2026-05-19栏目: 教程
-
特斯拉为自动雨刮创造了一个新的神经网络“Deep Rain”
2026-05-19栏目: 教程
-
银联:强力提升国际影响力
2026-05-19栏目: 教程
