【区分vue2和vue3下的element UI Dialog 对话框组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 Vue 2 和 Vue 3 中,Element UI(针对 Vue 2)和 Element Plus(针对 Vue 3)提供了 Dialog 对话框组件,用于在页面中显示模态对话框。这两个库中的 Dialog 组件在属性、事件和方法的使用上有所相似,但也存在一些差异。下面我将分别介绍 Vue 2 下的 Element UI Dialog 组件和 Vue 3 下的 Element Plus Dialog 组件的使用方式。

Vue 2 + Element UI Dialog 组件

属性(Props)
  • visible.syncv-model:控制对话框是否显示,使用 .sync 修饰符或 v-model 双向绑定。
  • title:对话框标题。
  • width:对话框的宽度。
  • fullscreen:是否为全屏对话框。
  • top:对话框距离顶部的距离。
  • modal:是否需要遮罩层。
  • modal-append-to-body:遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上。
  • lock-scroll:是否在 Dialog 出现时将 body 滚动锁定。
  • custom-class:Dialog 的自定义类名。
  • close-on-click-modal:是否可以通过点击遮罩层关闭 Dialog。
  • close-on-press-escape:是否可以通过按下 ESC 关闭 Dialog。
  • show-close:是否显示关闭按钮。
  • before-close:关闭前的回调,会暂停 Dialog 的关闭。
事件(Events)
  • open:Dialog 打开的回调。
  • opened:Dialog 打开动画结束时的回调。
  • close:Dialog 关闭的回调。
  • closed:Dialog 关闭动画结束时的回调。
方法(Methods)

Element UI 的 Dialog 组件通常不直接暴露方法供外部调用。你主要通过修改绑定的 visible 属性或监听事件来控制对话框的显示和隐藏。

示例
vue 复制代码
<template>
  <el-button type="primary" @click="dialogVisible = true">点击打开对话框</el-button>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭?')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
  },
};
</script>

Vue 3 + Element Plus Dialog 组件

属性(Props)
  • modelValuev-model:控制对话框是否显示,使用 v-model 双向绑定。
  • title:对话框标题。
  • width:对话框的宽度。
  • fullscreen:是否为全屏对话框。
  • top:对话框距离顶部的距离。
  • modal:是否需要遮罩层。
  • modal-class:遮罩层的自定义类名。
  • append-to-body:遮罩层是否插入至 body 元素上。
  • lock-scroll:是否在 Dialog 出现时将 body 滚动锁定。
  • custom-class:Dialog 的自定义类名。
  • show-close:是否显示关闭按钮。
  • close-on-click-modal:是否可以通过点击遮罩层关闭 Dialog。
  • close-on-press-escape:是否可以通过按下 ESC 关闭 Dialog。
  • before-close:关闭前的回调,会暂停 Dialog 的关闭。
事件(Events)
  • open:Dialog 打开的回调。
  • opened:Dialog 打开动画结束时的回调。
  • close:Dialog 关闭的回调。
  • closed:Dialog 关闭动画结束时的回调。
方法(Methods)

与 Element UI 类似,Element Plus 的 Dialog 组件通常也不直接暴露方法供外部调用。你主要通过修改绑定的 modelValue 属性或监听事件来控制对话框的

相关推荐
z_mazin20 分钟前
JavaScript逆向魔法:Chrome开发者工具探秘之旅
javascript·chrome·爬虫
绿草在线24 分钟前
Mock.js虚拟接口
开发语言·javascript·ecmascript
清风絮柳27 分钟前
52.个人健康管理系统小程序(基于springboot&vue)
vue.js·spring boot·毕业设计·前后端分离·健康管理系统·个人健康管理系统·个人健康管理小程序
时光追逐者1 小时前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
hz.ts1 小时前
Angular 国际化
javascript·ecmascript·angular.js
6武71 小时前
Vue 数据传递流程图指南
前端·javascript·vue.js
千鼎数字孪生-可视化1 小时前
3D模型给可视化大屏带来了哪些创新,都涉及到哪些技术栈。
ui·3d·信息可视化·数据分析
goto_w1 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
夏天想1 小时前
vant4+vue3上传一个pdf文件并实现pdf的预览。使用插件pdf.js
开发语言·javascript·pdf·vant
....4922 小时前
antvX6节点全选后鼠标通过拖拉调整视图的展示位置
javascript·计算机外设·数据中台·antvx6