vue-star评星组件开发

最新推荐文章于 2024-09-04 17:18:19 发布

秋天1014童话

最新推荐文章于 2024-09-04 17:18:19 发布

阅读量5.6k

点赞数 1

分类专栏： web前端 javaScript Vue框架

本文链接：https://blog.csdn.net/u013217071/article/details/72875163

版权

web前端同时被 3 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

Vue框架

12 篇文章 0 订阅

订阅专栏

star文件夹下建立Star.vue，及相关的图片信息。便于组件的就近维护
这里写图片描述
Star.vue：

<template>
    <div class="star" :class="starSize">
        <span v-for="(itemClass,key) in itemClasses" :class="itemClass" class="star-item"></span>
    </div>
</template>
<script>
    const LENGTH = 5;
    const CLS_ON = 'on';
    const CLS_HALF = 'half';
    const CLS_OFF = 'off';
    export default{
        props:{
            size:{ //尺寸，24,36,48
                type: Number
            },
            score:{
                type: Number
            }
        },
        computed:{
            starSize(){
                return 'star-'+ this.size;
            },
            itemClasses(){
                let result = [];
                let score = Math.floor(this.score*2)/2; //将数值调整为整数及.5的形式，例：4.3 => 4；4.6 => 4.5
                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 lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin.styl";
.star
    font-size: 0
    .star-item
        display: inline-block
        background-repeat: no-repeat
    &.star-48
        .star-item
            width: 20px
            height: 20px
            margin-right: 22px
            background-size: 20px 20px
            &.last-child
                margin-right: 0
            &.on
                bg-image('star48_on')
            &.half
                bg-image('star48_half')
             &.off
                bg-image('star48_off')
    &.star-36
        .star-item
            width: 15px
            height: 15px
            margin-right: 6px
            background-size: 15px 15px
            &.last-child
                margin-right: 0
            &.on
                bg-image('star36_on')
            &.half
                bg-image('star36_half')
            &.off
                bg-image('star36_off')

    &.star-24
        .star-item
            width: 10px
            height: 10px
            margin-right: 3px
            background-size: 10px 10px
            &.last-child
                margin-right: 0
            &.on
                bg-image('star24_on')
            &.half
                bg-image('star24_half')
            &.off
                bg-image('star24_off')
</style>

Header.vue:

<star :size="48" :score="3.5"></star>

<script>
import star from '../star/Star.vue'
export default{
    components:{
        star
    }
}
</script>

mixin.styl:

bg-image($url)
    background-image:  url($url + '@2x.png')
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio:3)
        background-image: url($url + '@3x.png')