用宽度百分比填充颜色答案

【问题标题】：fill color with percentage of width用宽度百分比填充颜色
【发布时间】：2021-09-19 00:46:15
【问题描述】：

我正在尝试在 vue 应用程序中创建“星级评论”组件。评分值“overallRating”是所有评分的平均值，可以是 0.0 到 5.0 之间的任何值。在我写的组件里面

<span v-for="(star, index) in maxStars" :key="index">
    <span 
        v-if="(index + 1) === Math.ceil(overallRating) && overallRating % 1 !== 0" 
        :style="{ width: (overallRating % 1).toFixed(2).substring(2) + '%' }" 
        class="icon-grey-star full-rating-star">
    </span>
    <span 
        v-else-if="(index + 1) <= Math.floor(overallRating)" 
        class="icon-grey-star full-rating-star">
    </span>
    <span v-else class="icon-grey-star"></span>
</span>

maxStars 设置为 5，overallRating 可以是 0.0 到 5.0 之间的任何十进制值。我想要实现的是，如果overallRating，比如3.7，用full-rating-star 类的颜色设置3 颗星。并通过设置width 属性将4th 星号填充为70% 颜色。并使用icon-grey-star 类将剩余星设置为灰色。

使用的css

.span.icon-grey-star{
    color: #ccc;
    &:before{
        margin-right: 0px;
        margin-left: 0px;
        width: auto;
    }
}
.icon-grey-star:before{
    content: '\e818'
}
.full-rating-star{
    color: red;
}

问题是将width 设置为百分比不起作用。我在这里做错了什么。

【问题讨论】：

看起来问题出在数学上，而不是视图逻辑
确实，如果您有 5 星评级，为什么还要有小数？为什么不是 10 星或 100 星？
@Paulie_D Ratings 值是 0 到 5 之间的平均值。
span 没有宽度。

标签： javascript css vue.js vuejs2

【解决方案1】：

这是展示如何为所有明星做这件事。但是您可以轻松地将背景和剪裁用于单个星星。

:root {
  --rating-max: 5;
  --rating-content: '★★★★★';
  --rating-inactive-color: #CCCCCC;
  --rating-background: #FFDD00;
}

.rating {
  display: inline-block;
  font-size: 30px;
}

.rating::before {
  --rating-percent: calc(var(--rating-value) / var(--rating-max) * 100%);
  content: var(--rating-content);
  background: linear-gradient(90deg, var(--rating-background) var(--rating-percent), var(--rating-inactive-color) var(--rating-percent));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

<p>0</p>
<div class="rating" style="--rating-value: 0.0;"></div>

<p>1</p>
<div class="rating" style="--rating-value: 1.0;"></div>

<p>2.5</p>
<div class="rating" style="--rating-value: 2.5;"></div>

<p>3.3</p>
<div class="rating" style="--rating-value: 3.3;"></div>

<p>5</p>
<div class="rating" style="--rating-value: 5;"></div>

【讨论】：