修改ElementUI的MessageBox,使之符合要求

2,208 阅读1分钟

目的

消息提示(this.$alert):

image.png
确认消息(this.$confirm):

image.png

如何修改ElementUI中的样式

在组件中额外书写一个<style></style>即可,然后使用浏览器工具就能取到当前的样式名和样式了;注意这个是全局生效的,不能设置scoped。

需求

这是消息提示时的底部div: image.png
这是确认消息时的底部div:

image.png
注意上面的button是取消的,下面的button是确认的。
需求:只有确认按钮时确认按钮居中,有取消按钮时确认按钮居左。

解决

解决:给.el-message-box__btns设置如下的样式:

    display: flex;
    flex-direction:row-reverse;
    justify-content:center;
    align-items:center;