对话框（dialog）

在保留当前页面状态的情况下，告知用户并承载相关操作。

基本使用

Dialog 弹出一个对话框，适合需要定制性更大的场景。

打开对话框

<template>
  <div>
    <el-button @click="visible=true">打开对话框</el-button>
    <itv-dialog title="标题" :visible="visible" @on-ok="visible=false" @on-cancel="visible=false">
      <itv-splitpanes class="default-theme">
        <itv-pane></itv-pane>
        <itv-pane></itv-pane>
        <itv-pane></itv-pane>
      </itv-splitpanes>
    </itv-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
      };
    },
  };
</script>

<style>
  .default-theme {
    height: 300px;
  }
</style>

Expand Copy Copy

Attributes

属性名	类型	默认值	说明
title	String	""	标题，也可通过具名 slot 传入
showFullscreen	Boolean	true	是否显示全屏图标
fullscreen	Boolean	false	是否全屏显示
top	String	""	Dialog CSS 中的 margin-top 值
loading	Boolean	false	确定按钮loading状态
visible	Boolean	false	对话框是否显示
draggable	Boolean	true	是否可以拖拽移动
footer	Boolean	true	底部内容，当不需要默认底部按钮时，可以设为 false
loadingText	String	提交中...	确定按钮 loading 文字
okText	String	确认	确定按钮文字
cancelText	String	取消	取消按钮文字
padding	String	20px	内边距

Events

事件名称	说明	回调参数
on-cancel	取消回调	无
on-ok	点击确定回调	无

Slots

name	说明
—	弹窗内容
title	标题区内容
footer	弹窗操作栏