Weex 动态Modal设计
我们在项目中使用了各种自定义的对话框、弹出框等控件，其中各种控件都是在各自的页面中弹出，其中最大的问题就是在tabbar中子页面弹出的modal不能显示全屏。本文的目的即是设计一个动态的Modal放在tabbar外面，通过与子页面的调用方法来开启对应的动态组件。
构建动态组件
Weex中用的组件实际是使用Vue.js生成的代码，由于Vue 2.0之后的代码都是预编译的，以前使用动态template的方法已经不适用，能构建动态组件的方法只有<component>以及render方法创建， 本文暂时先采用<component>来实现， 关于更多的<component>的知识可以参考Vue动态组件文档。
最基本的动态组件（v-modal.vue）如下：
<template>
<div class="cModal" append="tree">
<component v-bind:is="modalCurrentView"></component>
</div>
</template>
<style>
.cModal{
width: 750;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
<script>
module.exports = {
computed:{
modalCurrentView() {
return this.$store.state.modalCurrentView
}
},
components:{
"pop-call" : require("../module/personal/mainpage/v-pop-call.vue"),
"pop-head" : require("../module/personal/mainpage/v-pop-head.vue"),
"pop-version" : require("../module/personal/mainpage/v-pop-version.vue"),
"action-sheet" : require("../manage/camera/action_sheet/v-action-sheet.vue"),
}
}
</script>
<component>主要是通过动态修改is绑定的modalCurrentView组件来进行切换，可以用此方法来实现类似tabbar切换之类的效果。
其中我们的数据采用的是Vuex进行管理，也就是存储在store.js文件中：
import Vuex from 'vuex'
// Vuex is auto installed on the web
if (WXEnvironment.platform !== 'Web') {
Vue.use(Vuex)
}
var store = new Vuex.Store({
state:{
modalIsShow:false,
modalCurrentView:"pop-call"
},
mutations:{
CHANGE_MODAL_SHOW (state, isShow) {
state.modalIsShow = isShow
},
CHANGE_MODAL_VIEW (state, view) {
state.modalCurrentView = view
}
},
actions:{
changeModalShow(context, state) {
context.commit("CHANGE_MODAL_SHOW", state);
},
changeModalView(context, view) {
context.commit("CHANGE_MODAL_VIEW", view);
}
}
})
export default store
可以从store.js中看出，我们可以用changeModalShow方法来控制Modal的显示和隐藏，用changeModalView方法可以控制切换成那一个组件，不过调用store的方法显得有些麻烦，而且在WebStorm上没有任何提示，我们可以在其中再次封装一个modal.js来进行调用：
import store from './store.js'
import Vue from 'vue'
export default {
closeModal () {
store.dispatch("changeModalShow", false)
},
openModal (view) {
store.dispatch("changeModalView", view);
store.dispatch("changeModalShow", true)
},
}
至此一个简单的动态modal架构就出来了， 我们只需要在最外层的页面增加此动态控件即可：
<template>
<div class="cRoot" @androidback="onClickAndroidBack"
@viewappear="viewappear"
@viewdisappear="viewdisappear">
......
// 添加动态modal
<modal v-if="modalIsShow"></modal>
</div>
</template>
<script>
var nav = weex.requireModule('event');
var storage = weex.requireModule("storage");
module.exports = {
......
components:{
......
"modal" : require("./v-modal.vue")
},
computed:{
modalIsShow () {
return this.$store.state.modalIsShow
}
}
}
</script>
我们需要调用显示modal就可以使用：
import vModal from '../modal.js';
vModal.openModal("pop-head"); //其中"pop-head"是我们再v-modal.vue文件中引入的components；
vModal.closeModal(); //需要关闭的时候，只需要调用此方法即可
组件之间传值
Modal的显示和隐藏都没有问题了，但是还有一个问题就是封装的组件点击事件是直接往上传递，也就是传到动态的modal后就直接传到最外面的页面了，类似tabbar子页面就不会接收到事件。此时需要我们使用非父子关系之间的传值，简单的方法有两种， 一种是通过Vuex来实现， 另一种就是使用Vue组件通信， 因为我们定义了单独的modal.js，用第一种方法，调用modal时还要额外多引入文件，因此我们采用第二种方法。
Vue非父子关系之间的通信非常简单，只需要在modal.js加入几行代码即可：
import store from './store.js'
import Vue from 'vue'
export default {
eventBus:new Vue({}), //定义一个通用的Vue对象进行通信
closeModal () {
store.dispatch("changeModalShow", false)
},
openModal (view) {
store.dispatch("changeModalView", view);
store.dispatch("changeModalShow", true)
},
}
不过我们原来的组件点击的时候不再采用原来的this.$emit("eventName", eventData);，因为此方法只会冒泡到最外面的页面， 而传入不到调用的页面；应该改用如下的方法：
import vModal from '../modal.js'
vModal.eventBus.$emit("eventName", eventData);
而接收事件的组件可以mounted方法中进行监听：
mounted:function(){
var that= this;
vModal.eventBus.$on("eventName", (eventData)=> {
});
},
通过此方法， 我们就可以在动态modal包括的组件和调用动态modal的组件之间建立了联系。
动态组件的参数传递
动态modal还有一个很大的问题，就是包含的组件如果需要传递参数，怎么办呢？
我们首先定义一个统一的变量作为动态modal的传入参数， 在store.js中进行修改，加入参数：
var store = new Vuex.Store({
state:{
modalIsShow:false,
modalCurrentView:"pop-call",
modalData:{}
},
mutations:{
...
CHANGE_MODAL_DATA (state, data) {
state.modalData = data
}
},
actions:{
...
changeModalData(context, data) {
context.commit("CHANGE_MODAL_DATA", data);
}
}
})
export default store
而在定义的modal.js中修改openModal方法：
openModal (view, data) {
store.dispatch("changeModalData", data);
store.dispatch("changeModalView", view);
store.dispatch("changeModalShow", true)
},
定义的modalData可以通过<component>的参数传入
<template>
<div class="cModal" append="tree">
<component v-bind:is="modalCurrentView" :modalData="modalData"></component>
</div>
</template>
......
<script>
import Vue from 'vue'
module.exports = {
computed:{
modalCurrentView() {
return this.$store.state.modalCurrentView
},
modalData() {
let data = this.$store.state.modalData;
}
},
......
}
</script>
在自定义的弹出显示的组件内容中我们可以使用props来接收这些参数：
module.exports = {
props:{
modalData:{default:{}}
},
}
不过用此方法传递的参数，对子组件的修改比较多， 更好的方法是使用render函数来动态构建一个组件， 通过修改控件的tag来实现，不过在实际使用的时候碰到了一些问题，暂时先用这种不太优雅的方式实现，后续再进行改进吧。
