this.$confirm与MessageBox.confirm的样式兼容处理

首先，我们会在开发过程中会涉及到对一些组件进行自定义样式处理，那么我们既不想重新去写一个，又能在原本的样式上面做改动。这就涉及到了对组件样式进行统一处理。接下来我将给大家分享一下我对提示弹框样式的处理。

涉及到this.$confirm样式改动，MessageBox.confirm样式却没有跟着变动，那么我就将两者合并处理。

首先，我们在main.js文件中对messageBox.confirm的样式进行一个处理。随后将样式给到this.$confirm。这样样式问题就解决了。

const newMessageBoxConfirm = MessageBox.confirm;
MessageBox.confirm = (...args) => {
  const defaultOptions = {
    center: true,
    showClose: false,
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    customClass: 'custom-message-boxs',
  };
  const options = _.find(args, _.isPlainObject);
  if (options) {
    for (const key in defaultOptions) {
      if (key in options) continue;
      options[key] = defaultOptions[key]
    }
  } else {
    args.push(defaultOptions)
  }
  return newMessageBoxConfirm (...args);
};
Vue.prototype.$confirm = function (...args) {
  return MessageBox.confirm(...args);
};

解决最终两者样式统一问题