效果:修改u-collapse-item组件的下标题颜色,并设置成动态的。
在这里分享一下过程,希望能给各位一个思路
我们先找到样式部分。
这里存在两个标注起来的地方
data-v-xxxx:是样式 scope 配置的
scoped用于在组件中使用局部作用域的 CSS 样式。
使用 scoped,你可以在一个组件中使用相同的类名或标签名,并将其应用于不同的元素,但这些元素样式不会相互干扰。也就是说,scoped 属性实现了局部作用域的 CSS,保证了样式代码的私密性和独立性。
当你使用 scoped 属性时,Vue.js 将在编译时自动为每个选择器添加一个唯一的属性,这个属性的值会和组件中的元素绑定在一起,从而保证了样式的局部作用域。但需要注意的是, scoped 并不是万能的,有些复杂的样式仍需要全局样式表来处理。
<style lang="scss" scoped>
u-cell__label :组件的样式,我们现在就需要修改他。
深度选择器
(/deep/) stylus的样式穿透 使用:
(>>>) 通用的样式穿透
(::v-deep)
.fail {
/deep/ .u-cell__label>span {
color: #ff0000;
}
}
.success {
/deep/ .u-cell__label>span {
color: #55aa00;
}
}
这是我写的两个设置颜色的样式,通过样式穿透进行设置。
接下来就是动态样式。
动态class写法:
:class=" {‘lanmu’:true,‘success’ : items.status === ‘1’,‘fail’:items.status === ‘2’}"
效果展示: