高级弹窗 - EleModal

5.4.1.快速使用
高级弹窗组件是对 ElDialog 的扩展，支持拖拽、拉伸、全屏切换、多弹窗点击置顶、内容区弹出等功能，使用示例：

运行代码 新窗口打开
5.4.2.属性列表
支持 ElDialog 的全部属性(请查看 Element 文档)，这里只列出额外增加的属性：
属性 :multiple="true" 支持打开多个时会强制取消遮罩层，ElDialog 的 appendTo 属性是 v1.1.6 开始支持。
属性 resizable 为 true 就可以拉伸弹窗大小, 设置为 horizontal 只可横向拉伸，为 vertical 只可纵向拉伸。
如果开启拉伸时不显示右下角拉伸图标可能时弹窗内有定位元素遮挡了，可以设置拉伸图标的层级要高于其它元素：

• top   顶部，左右居中，样式 margin: 0 auto
• bottom   底部，左右居中，样式 margin: auto auto 0 auto
• left   左边，上下居中，样式 margin: auto auto auto 0
• right   右边，上下居中，样式 margin: auto 0 auto auto
• leftTop   左上角，样式 margin: 0 auto 0 0
• leftBottom   左下角，样式 margin: auto auto 0 0
• rightTop   右上角，样式 margin: 0 0 0 auto
• rightBottom   右下角，样式 margin: auto 0 0 auto
• center   正中间，样式 margin: auto，可替代 alignCenter 属性
  设置初始位置是通过设置 margin 样式实现的，因为弹窗的外层是 flex 布局，为 Object 类型就是设置四个方向的 margin ，如：
• 距离左边 20px 上下居中，:position="{ left: '20px' }" ，生成的样式为 margin: auto auto auto 20px
• 距离右边 20px 上边 10px ，:position="{ right: '20px', top: '10px' }" ，生成样式为 margin: 10px 20px auto auto
• 字段 bottom 和 right 是v1.1.9新增，之前版本只有 top 和 left 属性
  5.4.6.设置弹窗高度
  弹窗只提供了 width 属性设置宽度，高度是自适应内容高度，如果需要设置弹窗高度给自己的内容设置高度即可： <div> <!-- 加 maxHeight 和 minHeight 为 100% 才可以适应弹窗的全屏和拉伸 --> <ele-modal :maxable="true" :resizable="true" :body-style="{ overflow: 'auto', height: '200px', maxHeight: '100%', minHeight: '100%' }" :width="460" v-model="visible" title="标题"> <div style="padding: 40px 0;">内容</div> <template #footer> <el-button @click="visible = false">取消</el-button> <el-button type="primary">确定</el-button> </template> </ele-modal> <el-button @click="visible = true">Open</el-button> </div> </template> <script lang="ts" setup> import { ref } from 'vue';

  const visible = ref(false);
  </script>
  运行代码 新窗口打开
  5.4.7.底栏左侧添加按钮
  底部的按钮默认是居右显示的，如果还需要在左侧显示一些内容，实现示例：
  <template>

  <div> <ele-modal :width="460" v-model="visible" title="弹窗标题" :footer-style="{ display: 'flex', alignItems: 'center' }"> <div>弹窗内容</div> <template #footer> <div style="flex: 1;text-align: left;"> <ele-text type="danger" :icon="CircleClose"> 表单有 6 项校验未通过, 请重新填写 </ele-text> </div> <el-button>取消</el-button> <el-button type="primary">保存</el-button> </template> </ele-modal> <el-button @click="visible = true">Open</el-button> </div> </template> <script lang="ts" setup> import { ref } from 'vue'; import { CircleClose } from '@element-plus/icons-vue';

  const visible = ref(false);
  </script>
  运行代码 新窗口打开
  5.4.8.自定义关闭按钮
  插槽 closeIcon 是用于自定义关闭按钮，使用示例：
  <template>

  <div> <ele-modal v-model="visible" title="Tips" :width="460"> <div>This is a message</div> <template #closeIcon> <el-icon> <circle-close-filled /> </el-icon> </template> </ele-modal> <el-button @click="onOpen">Open</el-button> </div> </template> <script lang="ts" setup> import { ref } from 'vue'; import { CircleCloseFilled } from '@element-plus/icons-vue';

  const visible = ref(false);

  const onOpen = () => {
  visible.value = true;
  };
  
  运行代码 新窗口打开