vue 星星評分元件

評分外掛程式在購物的應用中經常可以看得到，但是用著別人的總是沒有自己寫的順手，正好趁著這段時間做乙個移動端應用的時候寫了乙個基於vue的評分元件，功能沒有寫全

主體結構：

.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=""
)p.star-num }分
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},
computed:
elseif(
this
.score ==
2* i -1)
else
statearr.
push()
i++}while
(i <=5)
return statearr
}},methods:},
showscorelayer()
,touchstart
(evt)},
touchmove
(evt)},
submit()
}}

在這個元件中，只實現了右滑評分的效果，如果需要左滑就需要在touchmove事件中進一步判斷

上述僅是我的乙個小小的分享，可能有不好的地方，可以給我提出來，thx，告辭~

vue 星星評分元件

微信小程式星星評分元件

vue 實現的評分小星星元件，包括半星

專案星星評分

vue 星星評分元件

微信小程式星星評分元件

vue 實現的評分小星星元件，包括半星

專案 星星評分

相關推薦

專案星星評分