Vue星级评分组件按宽度百分比填充星标不生效问题求助

错误点梳理 #

• CSS选择器书写错误：.span.icon-grey-star 中span是HTML标签名而非类名，前缀多余的.会导致样式无法匹配到对应元素。
• 行内元素宽度不生效：<span>默认是行内元素，直接设置width属性不会生效，需要修改为行内块级元素。
• 伪元素样式配置错误：你为伪元素设置了width: auto，同时没有配置溢出隐藏规则，就算外层元素设置了宽度，伪元素依然会完整展示星标，看不到裁剪后的半星效果。
• 半星实现逻辑有缺陷：没有灰色星作为底层背景，半星的缺失部分无法显示灰色底色。

修复后的代码 #

组件模板部分 #

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

优化了半星宽度的计算逻辑，直接取小数部分乘以100即可得到百分比值，无需截取字符串。

CSS样式部分 #

span.icon-grey-star{
    position: relative;
    display: inline-block;
    width: 1em;
    color: #ccc;
    margin: 0 2px;
}
.icon-grey-star:before{
    content: '\e818';
    display: inline-block;
    width: 1em;
}
.full-rating-star{
    position: absolute;
    left: 0;
    top: 0;
    color: red;
    overflow: hidden;
}

核心修改点：

1. 修正了选择器错误，正确匹配带icon-grey-star类的span标签
2. 把星标元素设置为行内块级元素，支持宽度配置
3. 满星类使用绝对定位叠加在灰色星底层之上，通过overflow: hidden裁剪超出宽度的红色星标部分，实现半星效果

内容的提问来源于stack exchange，提问作者simpywatch