html 星星遮罩,vue 星星评分组件

评分插件在购物的应用中经常可以看得到，但是用着别人的总是没有自己写的顺手，正好趁着这段时间做一个移动端应用的时候写了一个基于VUE的评分组件，功能没有写全

效果图.gif

主体结构：

.scoreLayer(v-show="isShowScore" @click="hideScoreLayer($event)")

.center-box

.star-box.flex-between

ul.star-list(@touchstart="touchStart" @touchmove="touchMove" ref="star")

li.star-item(

v-for="i in scoreList"

:class="{half: i.state == 1, full: i.state == 2}"

)

p.star-num {{score}}分

button.btn-confirm(@click="submit") 确定

最外层是一个遮罩，因为评分做成一个弹框形式，因此给弹框一个层，让其浮动在其他内容之上

接下来是样式设计：

.flex-between

display flex

justify-content space-between

.scoreLayer

display flex

align-items center

justify-content center

background-color rgba(0,0,0,.3)

.center-box

padding-top 0.4rem

padding-bottom 0.4rem

width 50%

background-color #FFF

border-radius 5px

box-shadow 0 0 5px #ccc

.star-box

padding 0 0.2rem

align-items center

.star-item

display inline-block

width 0.5rem

height 0.5rem

background url('./img/emptyStar.png') no-repeat center

background-size 0.5rem 0.5rem

&.half

background url('./img/halfStar.png') no-repeat center

&.full

background url('./img/fullStar.png') no-repeat center

基本样式就不多说了，将该组件的效果实现吧

export default {

data () {

return {

x0: 0, // 滑动初始点击位置

len: 0, // 包裹星星的div的宽度

score: 0, // 分数

isShowScore: false // 是否显示弹框

}

},

computed: {

scoreList () {

// 用一个数组存储每个星星的状态，如果是满星就是2，半星就是1，没有就是0

let i = 1

let state

const stateArr = []

do {

if (this.score >= 2 * i ) {

state = 2

} else if (this.score == 2 * i - 1) {

state = 1

} else {

state = 0

}

stateArr.push({

state

})

i++

} while (i <= 5)

return stateArr

}

},

methods: {

hideScoreLayer (evt) {

if (typeof evt ==='symbol' || (evt && evt.target.classList.contains('scoreLayer'))) {

this.isShowScore = false

this.score = 0

}

},

showScoreLayer () {

this.isShowScore = true

},

touchStart (evt) {

if (evt && evt.touches.length === 1) {

this.len = this.$refs.star.offsetWidth

this.x0 = evt.touches[0].clientX

}

},

touchMove (evt) {

this.score = 0

if (evt) {

let score = parseInt((evt.touches[0].clientX - this.x0)/this.len * 10)

this.score = score > 10 ? 10 : score

}

},

submit () {

// 提交数据

}

}

}

在这个组件中，只实现了右滑评分的效果，如果需要左滑就需要在touchMove事件中进一步判断

上述仅是我的一个小小的分享，可能有不好的地方，可以给我提出来，thx，告辞~