vue动态修改el组件已有class类的样式

最新推荐文章于 2024-07-04 00:59:27 发布

JUEESSS

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量695

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/JUEESSS/article/details/128268737

版权

项目中使用el组件进行快速开发，然而有的项目对组件有样式需求我们都是通过查找到设置样式的class用deep样式穿透进行样式修改，但如果要进行多种状态的判断来显示不同的样式，可以这样：
我以el的时间轴为例子，有进行的和没进行的要两个颜色，因此：

<el-timeline-item :class="{'yes': item.arrive,'no': !item.arrive}"
.yes {
	  ::v-deep.el-timeline-item__node {
	    left: 308px;
	    width: 12px;
	    height: 12px;
	    background: none;
	    border: 4px #0659FB solid;
	  }
  }
  .no {
	  ::v-deep.el-timeline-item__node {
	    left: 308px;
	    width: 12px;
	    height: 12px;
	    background: none;
	    border: 4px #75829B solid;
	  }
  }