一藏姐、運用window全局、$emit该贾、$on組件化
main.js
window.$channel = $channel;
Vue.prototype.NavBarConfig = (config) => {
$channel.$emit('NavTransitionEvent', config)
}
在其他頁面直接可以thisNavBarConfig({}), 比如：
this.NavBarConfig({
title: "差旅費事前申請單",
back: this.goNativeApp,
hide: false,
menu: {
// icon: 'iconfont icon-fenxiang',
text: {
value: "下一步",
class: "",
style: {}
},
handle: () => {
this.nextClick();
}
}
});
解析
1羔杨、this.NavBarConfig 的this指向Vue即 Vue.prototype.NavBarConfig;
調(diào)用 $channel.$emit('NavTransitionEvent', config)
2、$channel定義為window.$channel靶庙，因此所有頁面都能調(diào)用$channel
header.vue
// 其他元素省略
created: function() {
$channel.$on('NavTransitionEvent', (config) => {
this.reset();
if (!config) {
return;
}
this.config.isText = config.menu && config.menu.text ? true : false;
Object.assign(this.config, config);
if (this.config.hide) {
this.$emit('on-hide', true) // header關閉问畅，傳值父組件將其關閉
} else {
this.$emit('on-hide', false)
}
})
},
解析
1娃属、第一次created header組件未顯示，等this.NavBarConfig()調(diào)用時护姆，才再次啟動調(diào)用
二矾端、用Vue.extend構(gòu)建消息提示組件
// 假設toast.vue已寫好
// index.js
import Vue from 'vue';
import OriginToast from '../toast/toast.vue';
const Toast = Vue.extend(OriginToast);
let instance,
active = false;
export default {
show(message = ' ') {
if(active) return;
/* global document:true */
if(!instance) {
instance = new Toast({
el: document.createElement('div'),
});
document.body.appendChild(instance.$el);
}
active = true;
instance.message = message;
instance.type = 'loading';
instance.position = 'center';
Vue.nextTick(() => {
instance.show();
});
},
hide() {
instance.hide();
active = false;
},
toggle(message) {
return active ? this.hide() : this.show(message);
},
};
window.$loading = loading;
// 其他頁面調(diào)用
loading.toggle(‘正在加載...’);
