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>
由于使用了一个星星的背景图，所以老铁们复制代码以后，把这个图片添加到自己合适的位置，否则组件不可用
这里算是一个好处，防止万一以后老板哪天说，需要做一个饼干，草莓…的评分，只要换一个背景图就好
最后说一句
哈哈，这个算是自己的第一个作品吧，只是一个很小很简单的东西，并且已经开始运用到工作中，目前没有发现很严重的问题。老铁们有发现BUG，或者什么好的意见欢迎留言。
版本记录：
- 2018/90/10 21:56 发布