## Rap.showPopup
支持通过方法弹框,这样可以组件化写弹出框,并且可以按需加载,
Rap 会在弹框显示时将组件动态插入,弹框关闭时动态删除组件
使用
~~~
Rap.showPopup('/category_add', {
//下面的配置会覆盖 dialog 里的配置
data:{
record:_.extend({},record)
},
methods: {
onSave: function (data) {
me.catStore.load(1);
}
}
});
~~~
### category_add组件
~~~
this.$close() 可以关闭弹出框
~~~
下面的例子用了 element UI 开源库 对于其他 UI 库使用也是类似的
~~~
<style>
</style>
<template>
<el-dialog
class="cat_add"
:title="record.id?'编辑分类':'添加分类'"
:visible.sync="show"
width="500px"
>
<el-form label-width="80px" label-position="left">
<el-form-item label="名称">
<el-input v-model="record.name" placeholder="分类名称"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="show = false">取 消</el-button>
<el-button type="primary" @click="save">完成</el-button>
</span>
</el-dialog>
</template>
<script>
//这里定义组件
Rap.define('', [], {
data: function () {
return {
record: {},
show: true
}
}, watch: {
'show': function (show) {
if (!show) {
this.$close();
}
}
},
create: function () {
}, methods: {
save: function () {
var me = this;
axios.put('//cateSave', this.record, {loading: true}).then(function (rs) {
me.$close();
me.onSave();
});
//onSave会被调用方覆盖 这里写个空的表示下
}, onSave: function (record) {
}
}
})
</script>
~~~