vue2.0+stylus實現星級評定組件，computed計算屬性實現全星半星，多種星星規格

使用方法如下：（size為星星的大小，score為評分，比如傳4.5，則4.5顆星亮；傳4.1則四顆星亮）

<div class="score-wrapper"><span class="title">服務態度</span><star :size="36" :score="3.5"></star><span class="score">3.5</span></div><div class="score-wrapper"><span class="title">商品評分</span><star :size="36" :score="4.1"></star><span class="score">4.1</span></div>

效果：

以下為star.vue實現代碼

template：

<template><div class="star" :class="starType"><span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span></div> </template>

JavaScript：

<script type="text/ecmascript-6">// 評分有幾個等級const LENGTH = 5;// 全星有幾個const CLS_ON = 'on';// 半星有幾個const CLS_HALF = 'half';// 不亮的星星有幾個const CLS_OFF = 'off';export default {props: {// 圖片尺寸size: {type: Number},// 評分score: {type: Number}},computed: {// 顯示對應尺寸的星星圖片, 比如size是48,則添加star-48類,顯示對應樣式starType() {return 'star-' + this.size;},// 包含itemClasses() {let result = [];// 分數取整let score = Math.floor(this.score * 2) / 2;// 判斷是否有半星let hasDecimal = score % 1 !== 0;// 計算有幾個全星let integer = Math.floor(score);for (let i = 0; i < integer; i++) {result.push(CLS_ON);}if (hasDecimal) {result.push(CLS_HALF);}while (result.length < LENGTH) {result.push(CLS_OFF);}return result;}}}; </script>
style：（本人使用的是stylus，功能類似sass、less等）

<style lang="stylus" rel="stylus/stylesheet">@import "../../common/stylus/mixin.styl".starfont-size 0.star-itemdisplay inline-block&.star-48.star-itemwidth 20pxheight 20pxmargin-right 22px&:last-childmargin-right 0&.onbg-image('star48_on',20px,20px,no-repeat)&.halfbg-image('star48_half',20px,20px,no-repeat)&.offbg-image('star48_off',20px,20px,no-repeat)&.star-36.star-itemwidth 15pxheight 15pxmargin-right 6px&:last-childmargin-right 0&.onbg-image('star48_on',15px,15px,no-repeat)&.halfbg-image('star48_half',15px,15px,no-repeat)&.offbg-image('star48_off',15px,15px,no-repeat)&.star-24.star-itemwidth 10pxheight 10pxmargin-right 3px&:last-childmargin-right 0&.onbg-image('star48_on',10px,10px,no-repeat)&.halfbg-image('star48_half',10px,10px,no-repeat)&.offbg-image('star48_off',10px,10px,no-repeat) </style>
其中 bg-image函數寫在mixin.stylus中，通過以下方法引入使用 @import "../../common/stylus/mixin.styl"bg-image函數的代碼為：（實現背景圖片的選擇，圖片大小的設置、是否重復等功能）

bg-image($url,$width,$height,$repeat)@media (-webkit-max-device-pixel-ratio: 2),(max-device-pixel-ratio: 2)background-image url($url + "@2x.png")background-size $width $heightbackground-repeat $repeat@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)background url($url + "@3x.png")background-size $width $heightbackground-repeat $repeat

使用到的圖片，以下為size為36px的@2x圖片。

star36_on@2x.png

star36_half@2x.png

star36_off@2x.png

總結

以上是生活随笔為你收集整理的vue2.0+stylus实现星级评定组件，computed计算属性实现全星半星，动态改变星级，多种星星规格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。