element

11 KiB

Raw Blame History

基本用法

Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只是弹出框，可以尝试 MessageBox 组件。

要使用 Dialog 组件，首先你需要设置v-model属性，它接收Boolean，当为true时显示 Dialog。

Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。

title属性用于定义标题，它是可选的，默认值为空，下面是一个最简单的用例：

<el-button :plain="true" @click.native="dialogVisible = true">点击打开 Dialog

这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息取消确定

<el-button :plain="true" @click.native="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog title="提示" v-model="dialogVisible">
  <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click.native="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

设置尺寸

Dialog 组件提供四种尺寸：tiny, small, large, full。通过size属性来设置，下面是一个 tiny 的例子。

<el-button :plain="true" @click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog

这是一段内容取消确定

<el-button :plain="true" @click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>

<el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
  <span>这是一段内容</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click.native="dialogTinyVisible = false">取 消</el-button>
    <el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
  </span>
</el-dialog>

下面是一个全屏幕 Dialog 的样例：

<el-button @click.native="dialogFullVisible = true">点击打开全屏幕 Dialog

<el-button @click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>

<el-dialog title="提示" v-model="dialogFullVisible" size="full">
  <img src="http://placekitten.com/1920/1280">
</el-dialog>

设置能否通过点击modal或按下esc关闭Dialog

在默认条件下，你可以通过 ESC 和点击背后的遮罩层关闭 Dialog，但是可以通过设置close-on-click-modal属性和close-on-press-escape属性来关闭这一功能，它们接收Boolean，默认均为true。

<el-button @click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭

这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息

<el-button @click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>

<el-dialog title="提示"
  v-model="dialogStubbornVisible"
  :close-on-click-modal="false"
  :close-on-press-escape="false">
  <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
</el-dialog>

使用 Dialog 方法打开

使用v-model确实是一个不错的做法，为了一些特殊需求，我们暴露了实例open和close方法，你可以不用显式改变v-modal的值了：

<el-button @click.native="openDialog()">使用Dialog方法

这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息

<template>
  <el-dialog title="提示" v-model="dialogBindVisible" ref="dialogBind">
    <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
  </el-dialog>
</template>
<script>
  export default {
    data() {
      return {
        dialogBindVisible: false
      }
    },
    methods: {
      openDialog() {
        this.$refs.dialogBind.open();
      }
    }
  };
</script>

自定义内容

Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例，除此以外，它们并没有什么特殊之处：

<el-button @click.native="dialogTableVisible = true">打开嵌套表格的 Dialog

<el-button @click.native="dialogFormVisible = true">打开嵌套表单的 Dialog

取消确定

<el-button @click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

<el-dialog title="收货地址" v-model="dialogTableVisible">
  <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>
</el-dialog>

<el-button @click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

<el-dialog title="收货地址" v-model="dialogFormVisible">
  <el-form :models="form">
    <el-form-item label="活动名称" :label-width="formLabelWidth">
      <el-input :model.sync="form.name" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" :label-width="formLabelWidth">
      <el-select :value.sync="form.region" :width="300" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click.native="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
  </span>
</el-dialog>

Attributes

参数	说明	类型	可选值	默认值
title	Dialog 的标题	string
size	Dialog 的大小	string	'tiny', 'small', 'large', 'full'	'small'
modal	是否需要遮罩层	boolean		true
customClass	Dialog 的自定义类名	string
closeOnClickModal	是否可以通过点击 modal 关闭 Dialog	boolean		true
closeOnPressEscape	是否可以通过按下 ESC 关闭 Dialog	boolean		true

Slot

name	说明
-	Dialog 的内容
footer	Dialog 按钮操作区的内容

方法

每个el-dialog实例都暴露了如下方法，用于在不显式改变v-model值的情况下打开 / 关闭实例：

方法名	说明
open	打开当前实例
close	关闭当前实例

11 KiB Raw Blame History Unescape Escape