vuvivian's blog

越努力，越幸运.

vue/vue实战/vue cli3.0+element+mangoDB/基于iview的modal封装

vuvivian's Avatar 2020-04-09

分享本文
  1. 1. 为了将以下需求公共处理，所以基于iview的madal做了二次封装
  2. 2. 上图
  3. 3. 实例
  4. 4. 源码请移步 https://github.com/vuvivian/vue-node-mongo/tree/master/client-app/src/components/global/v-modal

为了将以下需求公共处理，所以基于iview的madal做了二次封装

  1. 底部需要添加删除按钮
  2. modal关闭或打开前需要手动清空form内容
  3. 自定义按钮添加loadding

上图

实例

1
2
3
4
5
6
7
8
9
10
11
 <v-modal
     title="demo"
     :hasDelete="deleteShow"
     :isShow="isShow"
     @on-cancel="cancle"
     @on-ok="ok"
     @on-delete="delte">
     <div slot="modal-content">
       <img src="@assets/logo.png" alt="图片" style="text-align:'center'">
     </div>
</v-modal>

源码请移步 https://github.com/vuvivian/vue-node-mongo/tree/master/client-app/src/components/global/v-modal

本文最后更新于 天前，文中所描述的信息可能已发生改变

本文发表于  , 最后修改于