uni-app:uView Rate 评分组件禁用后的颜色设置

u-rate 组件

uView Rate 评分组件文档地址:
https://www.uviewui.com/components/rate.html
该组件一般用于满意度调查,星型评分的场景。

需求说明

该组件禁用后颜色为灰色,如果评分是 5 分时全部五星都是灰色实心显示,这样给用户一种不确定有没有评分的不友好体验。

20220223_075425.png

所以考虑修改下样式,在禁用状态下如果已经评分了此显示红色。

解决方案

1、为组件增加 class="mystar"

<u-rate v-model="bill.appraiseScore" count="5" gutter="20" :touchable="false" :disabled="!btnAppraiseShow" class="mystar"></u-rate>

2、CSS

这里使用深度选择器和 !important,覆盖组件渲染后的内联样式。

/* 评分星星禁用后全是灰色,修改为红色 */
.mystar>>>.uicon-star-fill {
    color: rgb(230, 50, 50) !important
}

3、效果

20220222_141305.png

最后修改:2022 年 02 月 23 日 08 : 04 AM
如果觉得我的文章对你有用,请随意赞赏

发表评论