ElementPlus全局修改Dialog和MessageBox的lockScroll默认值

其实这个需求没什么用吧，原本是为了解决页面有滚动条时，打开关闭对话框或消息框会出现页面的抖动问题，但是这种方式也只是全局配置了对话框和弹出框的lockScroll属性为false，让弹窗出现时，滚动条不消失而已，但是滚动条存在的话，还是可以滚动页面的，所以其实没啥用。后面自己发现了一个更完美的做法，只需要css即可，可以看我另一篇文章关于这个滚动条闪动的讲解

但是在搜寻如何全局修改ElementPlus的组件默认值时，到最终寻找到方法，这个过程还是不错的！

由于关于ElementPlus修改默认值的方法在比较少吧，基本都是Element的。所以plus版只能靠自己啦

方法如下：

新建一个文件 elementPlusConfig.ts

dialog默认属性的修改，主要是通过打印了 ElDialog的值，发现里面有个 props属性，再往里找就找到了想要的东西

MessageBox的话，比dialog麻烦，打印MessageBox的话，不能像dialog那样直接改，然后意外的发现了源码，可以对源码进行重写，下边关于MessageBox的重写其实就只是在源码的基础上加了句lockScroll: false而已，而且仅针对confirm的情况，其他的消息弹窗也是一样的，源码都有，直接复制过来修改一下就好了。源码位置在\node_modules\element-plus\es\el-message-box\index.js，搜索MessageBox就能看到了

下面是我封装后的文件（这里重写的话ts会报错，这里暂时不知道这么处理，直接简单粗暴忽略注释就好了 // @ts-ignore）

import { ElDialog, ElMessageBox } from "element-plus";

// 1、对话框 默认 在 Dialog 出现时不将 body 滚动锁定
ElDialog.props.lockScroll.default = false

// 2、处理 确认对话框  滚动条闪动  源码重写

// @ts-ignore
ElMessageBox.confirm = (message, title, options) => {
  if (typeof title === "object") {
    options = title;
    title = "";
  } else if (title === void 0) {
    title = "";
  }
  return ElMessageBox(Object.assign({
    title,
    message,
    type: "",
    showCancelButton: true,
    // 设置该属性为false
    lockScroll: false
  }, options, {
    boxType: "confirm"
  }));
};

在main.ts 中引入该文件即可即可