开心一记 (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;

}

}

Symiac
发布了13 篇原创文章 · 获赞 1 · 访问量 3730
私信 关注

本文链接http://element-ui.cn/news/show-1289.aspx