一文读懂Vue中的el-dialog（附Demo）

前言

原先对于该知识点写过一个Demo，推荐阅读：点击按钮框来选择相应信息（Vue + Java）

1. 基本知识

el-dialog 是 Element UI 框架中的一个组件，用于创建对话框

提供了丰富的功能和选项，可以用来创建各种类型的对话框，如信息确认框、表单填写框等

基本用法如下：

<template>
  <el-dialog :visible.sync="dialogVisible" title="对话框标题">
    <!-- 对话框内容 -->
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false // 控制对话框的显示与隐藏
    }
  }
}
</script>

常用的属性如下：

• visible：控制对话框的显示与隐藏，可以使用.sync修饰符实现双向绑定。
• title：对话框标题。
• width：对话框宽度。
• top：对话框距离顶部的距离。
• modal：是否显示遮罩层。
• modal-append-to-body： 遮罩层是否插入至 body 元素上。
• close-on-click-modal：是否点击遮罩层关闭对话框。
• close-on-press-escape：是否按下 ESC 键关闭对话框
• draggable：是否可拖动
• resizable：是否可调整大小

事件：

• open: 对话框打开时触发的事件
• close: 对话框关闭时触发的事件

2. Demo

点击按钮可以打开对话框，对话框标题为 “示例对话框”，宽度为页面宽度的 30%，内容为 “这是一个简单的示例对话框”

对话框有两个按钮，一个是 “取消”，点击后对话框关闭，另一个是 “确定”，点击后同样关闭对话框

<template>
  <div>
    <el-button type="primary" @click="openDialog">打开对话框</el-button>
    <el-dialog :visible.sync="dialogVisible" title="示例对话框" width="30%">
      <span>这是一个简单的示例对话框</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>

结合大部分属性的Demo：

Demo特性主要围绕属性的作用

• 对话框标题为 “示例对话框”
• 对话框宽度为页面宽度的 50%
• 对话框距离顶部的距离为页面高度的 20%
• 显示遮罩层
• 遮罩层插入至 body 元素上
• 点击遮罩层时关闭对话框
• 按下 ESC 键时关闭对话框
• 对话框可拖动
• 对话框可调整大小

<template>
  <div>
    <el-button type="primary" @click="openDialog">打开对话框</el-button>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      :width="dialogWidth"
      :top="dialogTop"
      :modal="modalVisible"
      :modal-append-to-body="appendToBody"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :draggable="draggable"
      :resizable="resizable"
      @close="handleClose">
      <span>这是一个演示对话框</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogTitle: "示例对话框",
      dialogWidth: "50%",
      dialogTop: "20vh",
      modalVisible: true,
      appendToBody: true,
      closeOnClickModal: true,
      closeOnPressEscape: true,
      draggable: true,
      resizable: true
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    handleClose() {
      console.log("对话框已关闭");
    }
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>