Vue 星级评分组件

向右看齐 2023-02-13 11:30 4阅读 0赞

# Vue 星级评分组件 #

描述：其实很早就有想做一个星级评分的组价了，并且想写一些组件的代码库，就是在自己没事的时候造一些轮子，在工作的时候直接 *Ctrl + C* 和 *Ctrl + V*。别人还在苦苦加班写东西的时候，你已经开开心心下班，该干嘛干嘛去了，是不是很爽，哈哈哈哈…  
这里插播一个自己的心得。声明一下我并没有说别人开源的东西不好，或者别人有开源伸手即得的东西干嘛还要自己从新写。个人的体会就是，别人的东西也要用，自己的东西也要写，两者并不冲突，并且是一个相辅相成的关系。只有在用了别人的东西多了，才会发现有哪些东西设计的不好，如果然你自己来自己会怎么做，总结出一套个人的经验出来（其实看多了，很多东西的套路都是差不多的，哈哈），这样日后真的有组团队开发的时候不至于一脸懵逼。  
再来说说为什么要写。不知道大家有没有这样的体会，很多时候，看别人的东西（特别是视屏教程），一边对着文档（视屏）看源码，特别容易懂，等过一个几天在回来看的时候，感觉又是新的，又要开从头开始。这里面的最重要原因就是你没有动手做写，并没有把别人的东西转化成为你自己的。所以当你开始动手写的时候，你会发现，原来很多不起眼的东西，他们往往就是突破问题的关键，是你以前无法突破的瓶颈。  
说了一大堆，感觉重点就是：自己要多去尝试，多动手去写，探索的这些时间不会白费的，日后总会还回来的，毕竟：磨刀不误砍材工！

步入正题…

## 移动端星级评分组件 ##

> 说明：该组件仅限在移动端使用，并且在 *Vue* 项目中

### 实现的功能点： ###

*  核心：用户点击相应的星星时，能够通过事件的形式，把分数派发出来，只要监听：*starMarkChange* 事件即可
 *  可以配置星星的数量，默认点亮的个数，是否是只读，等

### 使用方式 ###

目前组件还没有通过 *NPM* 等包管理工具发出来，如果有老铁需要尝试，只要创建一个 .vue 的文件，就像是自己写的组件一样通过 import 引入就好。

### 属性 ###

*  starNum 星星的个数，默认：5，只接受 *Number* 类型数据
 *  defaultRating 默认点亮星星的个数，默认：5，只接受 *Number* 类型数据
 *  readOnly 是否是只读，用户不能点击星星，也不会触发事件，在只做展示的场景会非常有用
 *  outIndex 外部传进来的一个标志位，在循环做评分列表，标记外部的索引值的时候会比较有用，这样可以快速定位到某项。他会做为 *starMarkChange* 事件的的第二个参数

### 事件 ###

*  starMarkChange 点击星星时派发的事件，派发参数：mark，星星的分数，Number类型，还有外部的索引值，如果外部有绑定的情况

<template>
      <div class="star-phone" @click.stop="clickRating">
        <div
          v-for="(item, index) in starNum"
          :key="index"
          :class="isRating(index)"
          :data-index="index"
        />
      </div>
    </template>
    
    <script type="text/ecmascript-6">
    export default {
      props: {
        starNum: {
          // 星星的个数
          type: Number,
          default: 5,
        },
        defaultRating: {
          // 默认点亮的个数
          type: Number,
          default: 5,
        },
        outIndex: {
          // 外界传进来的一个标识
          type: Number,
          default: 0,
        },
        readOnly: {
          // 是否是只读，默认不是，拥有点击功能
          type: Boolean,
          default: false,
        },
      },
      data () {
        return {
          rating: this.defaultRating, // 用于控制点亮星星的个数
        }
      },
      methods: {
        isRating (index) {
          ++index
          return index <= this.rating ? 'star-item star-active' : 'star-item'
        },
        clickRating (ev) {
          if (this.readOnly) {
            return
          }
    
          let mark = parseInt(ev.target.dataset.index) + 1
          this.rating = mark
          this.$emit('starMarkChange', mark, this.outIndex)
        },
      },
    }
    </script>
    
    <style scoped>
      .star-phone {
        position: relative;
        display: inline-block;
        line-height: 26px;
        -webkit-tap-highlight-color:transparent;
      }
      .star-item {
        display: inline-block;
        width: 36px;
        height: 26px;
        background-image: url('./star.png'); /* 换成图片真实路劲，图片在下面给出 */
        background-clip: content-box;
        background-position: center 0;
        background-repeat: repeat-y;
        cursor: pointer;
        vertical-align: bottom;
        white-space: nowrap;
      }
      .star-item:last-child {
        padding-right: 0;
      }
      .star-active {
        background-position: center 26px;
      }
    </style>

![星星图片][70]

[70]: https://img-blog.csdn.net/20180910214054931?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpeF9zaXhfc2l4XzY2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70