# Dialog 对话框（齐思博）

UI改版前的对话窗，后续请使用ndialog。

# 基础用法

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

这是一段信息

需要设置show属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。

<template>
    <div>
        <el-button @click="showDialog">点击打开Dialog</el-button>
        <h-dialog
          :title="'提示'"
          :show="asubmitDialog"
          :width="'400px'"
          @hclose="asubmitDialog = false"
          @hconfirm="asubmitDialog = false">
          <div class="submit-dialog-con">这是一段信息</div>
        </h-dialog>
    </div>
    
</template>
<script>
export default {
  data() {
    return {
      asubmitDialog: false
    }
  },
  methods: {
    showDialog() {
      this.asubmitDialog = true
    }
  },
}
</script>
显示代码

# 自定义

Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。

 
<style lang="scss">
  .dialog-self {
    table {
      margin: 0;
    }
    .el-select {
      width: 300px;
    }
    .el-input {
      width: 300px;
    }
  }
</style>
<template>
  <div class="dialog-self">
    <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

    <h-dialog title="收货地址" :show="dialogTableVisible"
      @hclose="dialogTableVisible = false"
      @hconfirm="dialogTableVisible = false">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </h-dialog>

    <!-- Form -->
    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

    <h-dialog title="收货地址" :show="dialogFormVisible"
      @hclose="dialogFormVisible = false"
      @hconfirm="dialogFormVisible = false">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </h-dialog>
</div>
</template>

<script>
  export default {
    data() {
      return {
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
      };
    }
  };
</script>
显示代码

# Attributes（支持elementUI-Dialog对话框所有配置）

参数 说明 类型 可选值 默认值
title 标题 string — —
show 是否显示 Dialog boolean — false
cancelText 取消按钮文字，如果是916则不展示该按钮 string — 取消
confirmText 确定按钮文字，如果是916则不展示该按钮 string — 确定
width 弹窗宽度 string — 750px
isShowBtn 是否展示底部按钮区域 boolean — true
isDisabled 确定按钮是否禁用状态 boolean — false

# Events

方法名 说明 参数
hconfirm 底部确定按钮回调 -
hclose Dialog 关闭的回调 -

← ndialog 对话窗 →