Skip to main content

Dialog 对话

何时使用​

需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Dialog 在当前页面正中打开一个浮层，承载相应的操作。

代码演示​

基础使用​

table demo

代码
<template>
  <erDialog 
    title="Dialog"
    width="400px"
    :isVisible="true"
  />
</template>

复合使用​

tableBorder demo

代码
<template>
  <erDialog 
    title="Dialog"
    width="400px"
    :isVisible="true"
    okBtn="OK"
    disabledOK
    cancelBtn="Cancel"
    :outStyleBody="{padding: '10px'}"
    @close="console.log('close')"
    @cancel="console.log('cancel')"
    @confirm="console.log('confirm')"
  >
    <template v-slot:icon>
      <img src="https://img.icons8.com/?size=50&id=11707&format=png" style="width: 20px; height: 20px; margin-right: 5px;"/>
    </template>
    <p>我是内容</p>
  </erDialog>
</template>

API​

Attributes​

属性名说明类型默认值
title弹窗标题string—
isVisible是否显示弹窗booleanfalse
cancelBtn取消按钮文字string—
okBtn确定按钮文字string—
disabledOK禁用确认按钮booleanfalse
disabledCancel禁用取消按钮booleanfalse
cancelXIcon取消关闭弹窗iconbooleanfalse
outStyleMask弹窗蒙层样式Object—
outStyleContent弹窗整体内容样式object—
outStyleBody弹窗内容样式Object—

Events​

事件名说明类型
@close关闭弹窗事件Function
@confirm确认按钮事件Function
@cancel取消按钮事件Function

Slots​

插槽名说明
—默认插槽: Dialog的内容
icon标题前自定义icon等内容插槽