ant-design-vue中实现modal模态框的复用(添加,编辑展示同一个模态框)
用两个button(添加,编辑)按钮展示同一个模态框,并不是什么大问题,问题在于解决这两个模态框得有自己的确定和取消方法
父页面完全接管子页面(利于子页面复用)
父页面代码:
<-- 定义两个按钮,一个添加按钮, 一个编辑按钮 -->添加 编辑
<-- 引入模态框,将modal框的确定和取消方法由此元素触发调用 -->add ref="collectionForm" :visible="visible" @cancel="dialogStatus==='add'?handleCancel():handleEditCancel()" @ok="dialogStatus==='add'?handleOk():handleEditOk()" />
子页面代码:
<-- 用emit方法触发父级方法,自己本身不需要处理方法 -->
<-- 表单校验的时候,可以表单校验成功了之后再去触发父元素方法 -->
modal :visible="visible" title='Create a new collection' okText='完成' @cancel="() => { $emit('cancel') }" @ok="() => { $emit('ok') }" > group v-decorator="['modifier',{initialValue: 'private'}]"> Public Private
使用上面这种方式,子页面基本上不需要处理什么业务逻辑,所有方法都由父页面实现,这样就可以把子页面随意引用到其他地方去使用,也是官方文档中的样例。