【若依前后端分离】对话框/模态框el

您所在的位置：网站首页 › 打开模态窗口怎么设置密码呢 › 【若依前后端分离】对话框/模态框el

【若依前后端分离】对话框/模态框el

2024-06-28 04:39| 来源: 网络整理| 查看: 265

1、模态框点空白处不消失

单个添加：el-dialog 加上：close-on-click-modal='false'

全部添加：在main.js中添加

//模态框点击空白不消失 Element.Dialog.props.closeOnClickModal.default = false 2、模态框可拖拽

在el-dialog上添加：v-dialogDrag

3、模态框可拖动弹窗宽度和高度

拖动宽度：在el-dialog上添加v-dialogDragWidth

拖动高度：在el-dialog上添加v-dialogDragHeight

4、模态框详解

1、按钮

点击按钮弹框

2、点击按钮打开模态框事件

/** 点击按钮弹出模态框 */ openDialogButton() { //可以加判断条件 //模态框内容置空 this.form = {}; //打开模态框 this.Open = true; //模态框标题 this.title = "模态框"; },

3、模态框

需要设置visible属性，它接收Boolean，当为true时显示 Dialog。

center参数：设置为true即可使标题和底部居中。center仅影响标题和底部区域。

Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

fullscreen参数：是否为全屏Dialog，默认false

append-to-body参数：Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true，如果需要在一个 Dialog 内部嵌套另一个 Dialog，设为true。

确定取消

4、模态框定义

data() { return { // 是否显示弹出层 Open: false, //表单参数 form: { Name：undefined， }, // 表单校验 rules: { Name: [ {required: true, message: "名字不能为空", trigger: "blur"} ], } } }

5、模态框确定或取消按钮

/** * 点击取消事件 */ cancel() { //关闭模态框 this.Open = false; this.form = {}; }, /** * 点击确定事件 */ submit() { //与后端交互 updateDetail(this.form).then(response => { this.$modal.msgSuccess("成功"); this.Open = false; this.getList(); }); },

【本文地址】

【若依前后端分离】对话框/模态框el

【若依前后端分离】对话框/模态框el

今日新闻

推荐新闻