移动端 Vue 星级评分

本文主要是介绍移动端 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) {++indexreturn index <= this.rating ? 'star-item star-active' : 'star-item'},clickRating (ev) {if (this.readOnly) {return}let mark = parseInt(ev.target.dataset.index) + 1this.rating = markthis.$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>