element-UI样式修改button篇
elementui的button主要使通过给button添加限定来修改样式的，具体使如何实现的我还不是很清楚，但是，不妨碍修改样式
elementui中button主要是靠字体、内边距（padding）撑起来的，因此，修改字体⼤⼩和内边距（padding）可以修改其⼤⼩（介绍按钮⼤⼩限定会详细介绍），下⾯来看elementui中button的各种限定：
element的各种限定：
限定的话主要有以下⼏⽅⾯：
颜⾊限定：颜⾊限定主要包含的样式有：字体颜⾊(color) 背景颜⾊(background-color) 边框颜⾊(border-color)
primary 主要
success 成功
info 信息
htmlbutton属性warning 警告
danger 危险
plain 朴素
⼤⼩限定：⼤⼩限定主要包含样式有 字体⼤⼩(font-size) 内边距⼤⼩(padding)
medium 中等
small ⼩型
mini 迷你
形状限定：形状限定主要包含的就是圆⾓样式实现的(border-radius)
round 圆⾓按钮
circle 圆形按钮
介绍完按钮限定，接下来就是修改样式了。
如果是⾃⼰从头开始写项⽬，那么可以使⽤普通按钮直接使⽤：.el-button(样式类名)修改样式，button主要有哪些样式上⾯也有介绍，这⾥就不赘述了，不过有⼀点要注意，如果官⽅给的四种⼤⼩没有你想要的，需要⾃⼰修改，不要直接修改按钮的⾼度(height)；上⾯提到过官⽅的按钮是靠字体⼤⼩(font-size)和内边距(padding)撑起来的，如果直接⾼度，可能会导致按钮字体不居中，宽度(width)也⼀样。颜⾊、字体颜⾊的都可以⾃⼰加。
但如过是别⼈的模板，但是⼜要⾃⼰修改样式，就需要把模板中不同的按钮样式改统⼀了，那么就需要改不同样式的按钮了
如果是普通按钮，使⽤.el-button  就好如：
.el-button {
background-color: #000;
color: red;
}
如果有各种限定的，.el-button 就不好使了，需要在给类也加上同样的限定，如成功按钮就要 .el-button--success 来修改，别的限定也⼀样类名如下：
.el-button--primary 主要按钮
.el-button--success 成功
.el-button--info 信息
.el-button--warning 警告
.el-button--danger 危险
.el-button--medium 中等
.el-button--small ⼩型
.el-button--mini 迷你
如：
.el-button--info,
.el-button--default,
.
el-button--cyan,
.el-button--primary,
.el-button--success,
.el-button--warning,
.el-button--danger {
border: 1px solid #cococo;
color: red;
}
以上这些是可以⽤来修改限定按钮的样式，但是还有⼏个限定修改⽅式不是加限定了是加.is-[限定名]，主要有 plain round circle disabled(这个是html按钮本⾝的属性，虽然有elementui的样式，但是我没有归类到element的限定中)
如需修改，需要⽤下⾯的⽅式：
.el-button--primary.is-plain
如果是还有别的这种⽅式的限定，继续 . 就好，如主要按钮(primary)+朴素(plain )+不可⽤就需要
.el-button--primary.is-plain.is-disabled
如：
.el-button--primary.is-disabled:active {
background-color: #eee;
border: 1px solid #ccc;
}
在此就不⼀⼀列举了。
如果有⿏标悬停的，直接使⽤伪类选择器 :hover就好。
如：
.
el-button--danger.is-disabled:hover{
background-color: #eee;
border: 1px solid #ccc;
}
}
最后，elementUI⾃带⼀个左边的外边距(margin-left)，如果排版需要，记得将其去掉

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。