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

敲厉害的燕宝

已于 2024-02-06 14:34:30 修改

阅读量959

点赞数 4

文章标签： vue.js javascript 前端

于 2024-02-06 14:12:55 首次发布

本文链接：https://blog.csdn.net/m0_63456808/article/details/136055502

版权

本文详细介绍了如何在Vue项目中使用ElementUI的el-dialog实现模态框的自定义功能，包括关闭方式、拖拽、尺寸调整，以及如何通过点击按钮触发弹出、关闭和数据交互的事件处理。

摘要由CSDN通过智能技术生成

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

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

<el-dialog :close-on-click-modal='false'>

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

//模态框点击空白不消失
Element.Dialog.props.closeOnClickModal.default = false

2、模态框可拖拽

在el-dialog上添加：v-dialogDrag

<el-dialog v-dialogDrag></el-dialog>

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

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

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

<el-dialog v-dialogDragWidth v-dialogDragHeight></el-dialog>

4、模态框详解

1、按钮

<el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="openDialogButton"
          
        >点击按钮弹框
        </el-button>
      </el-col>

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。

 <!-- 自动配货对话框，选择站台 -->
    <el-dialog :title="title" :visible.sync="Open" width="500px" append-to-body
:close-on-click-modal='false' v-dialogDragWidth v-dialogDragHeight
    > 

      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名字" prop="Name">

        <el-input v-model="form.Name" placeholder="请输入名字"/>

        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

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();
            });
    },