使用宽度百分比填充颜色

b4lqfgs4 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(305)

我正在尝试在vue应用程序中创建“stars review”组件。评级值“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 ，设置3颗星，颜色来自课堂 full-rating-star . 设定 4th 满天星 70% 通过设置 width 财产。并使用 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 因为百分比不起作用。我做错了什么。

vue.js JavaScript css vuejs2

来源：https://stackoverflow.com/questions/68303523/fill-color-with-percentage-of-width

1条答案

按热度按时间

epfja78i1#

这是展示如何为所有的明星做这件事。但是你可以很容易地为一颗星星使用背景和剪辑。

: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>

赞(0）回复(0）举报 2021-09-13

我来回答

使用宽度百分比填充颜色

1条答案

相关问题

热门标签

最新问答