开心一记 （vue页面css）优先级

在应用element的时候遇到需要自己写样式的button

实现效果

 

上传前文字为蓝色，背景图标为同色按钮，点击后文字颜色改变，图标更换。

HTML：

<el-button :disabled="is_upload" :class="{after_upload:is_upload}" @click="submit">请上传.pdf文件</el-button>

 

TS

is_signed: boolean = false

submit(){

this.is_signed=true

}

 

CSS优先级解决：

.el-button {

text-indent: 1em;

color: #004098;

width: 145px;

background: url(../../../assets/upload.png) 13px center no-repeat;

}

.el-button {

&.after_upload {

text-indent: 1em;

color: #c0c4cc;

width: 145px;

background: url(../../../assets/after_upload.png) 13px center no-repeat;

}

}