首先,我们会在开发过程中会涉及到对一些组件进行自定义样式处理,那么我们既不想重新去写一个,又能在原本的样式上面做改动。这就涉及到了对组件样式进行统一处理。接下来我将给大家分享一下我对提示弹框样式的处理。
涉及到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);
};
解决最终两者样式统一问题