Vue 星级评分组件

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>