一个页面有多处弹框填写信息时，使用antd-vue组件Modal时，怎么写更好？

Question

如题。
页面有多个不同类型的添加功能，想用Modal实现，是一个类型写一个Modal，还是一个Modal进行复用？
复用的话要怎么做到弹框内容显示不一致？

<a-modal>
        <input></input>
        <input></input>
</a-modal>

<a-modal>
        <select></select>
        <input></input>
</a-modal>

Answer 1

如果每个弹框内容都相差很多的话，我觉得还是用多个Modal比较好。
如果每个弹框内容基本一致的话，用一个Modal比较好。 可以通过给Modal传入不同type类型来用v-if展示不同内容。

Answer 2

搞个v-if判断就是了，毕竟你modal打开一个，不能在打开另外一个吧，在内容都写在一个modal里面用<div>也好,<template>也好，搞个v-if不就解决了

Answer 3

基于a-modal封装一个自定义的modal组件，根据属性传值type不同，通过v-if控制哪些元素需要特殊展示。具体还是看这几个modal区别大不大了。