Vue封装五星好评

客官°小女子只卖身不卖艺 2023-01-01 13:56 178阅读 0赞

![在这里插入图片描述][20210103103532825.png]

图标下载：  
![在这里插入图片描述][20210115094400842.png]  
![在这里插入图片描述][20210115094400845.png]

创建starXIng.vue

<template>
      <div class="statBox">
        <div v-for="(item, index) in starArr" :class="item" :key="index"></div>
      </div>
    </template>
    
    <script>
    export default { 
      props: { 
        star: String,
      },
      computed: { 
        starArr() { 
          //星级评分
          var starClass = [];
          var onstar = Number(this.star);
          // 满星
          for (let i = 0; i < onstar; i++) { 
            starClass.push("on_star");
          }
          //灰色星星
          while (starClass.length < 5) { 
            starClass.push("off_star");
          }
          return starClass;
        },
      },
      data() { 
        return { 
          nostart: [1, 2, 3, 4, 5],
        };
      },
      watch: { },
      methods: { },
    };
    </script>
    
    <style lang="scss" scoped>
    
    .statBox{ 
        display: flex;
    }
    .on_star { 
      width: 40rpx;
      height: 40rpx;
      display: inline-block;
      margin-right: 40rpx;
      background: url('/stars_icon.png'); //高亮图标
      background-size: 100%;
    }
    .off_star { 
      width: 40rpx;
      height: 40rpx;
      display: inline-block;
       margin-right: 40rpx;
      background: url('/stars_none_icon.png');//灰色图标
      background-size: 100%;
    }
    </style>

使用  
star表示高亮几颗星

<statr-xing star="1"></statr-xing>

## 自行拓展吧!!! ##

[20210103103532825.png]: /images/20221120/f0bf83f5fa7b4792ba0d41a6229baaa3.png
[20210115094400842.png]: /images/20221120/9b95ede40f964307917ad9856dea7f70.png
[20210115094400845.png]: /images/20221120/ba1e43b126f645edbb78c7b60ef2fdb4.png