更新记录

0.0.3（2021-04-15） 下载此版本

修改了图标展示不出来的bug

0.0.2（2020-11-09） 下载此版本

删除了static中，多余的压缩包

0.0.1（2020-11-09） 下载此版本

第一版，完成了自定义大小、间距、图片、数量、只读

平台兼容性

集成说明

template中添加组件

<htz-rate v-model="ceshi1"></htz-rate>

script中引用组件

import htzRate from '@/components/htz-rate/htz-rate.vue'
export default {
        data() {
            return {
                ceshi1: 0
            }
        },
        components: {
            htzRate,
        },
    }

属性说明

事件

demo展示

<template>
    <view>
        <view class="htz-item">
            <view class="htz-title">基本用法</view>
            <view>
                <htz-rate v-model="ceshi1"></htz-rate>
            </view>
            <view class="htz-item-msg">当前评分:{{ceshi1}}分</view>
        </view>
        <view class="htz-item">
            <view class="htz-title">只读状态</view>
            <htz-rate v-model="ceshi7" :readonly='true'></htz-rate>
            <view class="htz-item-msg">当前评分:{{ceshi7}}分</view>
        </view>
        <view class="htz-item">
            <view class="htz-title">change用法</view>
            <htz-rate v-model="ceshi6" @change="ceshiChange"></htz-rate>
            <view class="htz-item-msg">当前评分:{{ceshi6}}分</view>
        </view>
        <view class="htz-item">
            <view class="htz-title">自定义数量</view>
            <htz-rate v-model="ceshi4" :count="7"></htz-rate>
            <view class="htz-item-msg">当前评分:{{ceshi4}}分</view>
        </view>
        <view class="htz-item">
            <view class="htz-title">自定义大小/间距</view>
            <htz-rate v-model="ceshi5" :size="70" :gutter="50"></htz-rate>
            <view class="htz-item-msg">当前评分:{{ceshi5}}分</view>
        </view>
        <view class="htz-item">
            <view class="htz-title">自定义图片</view>
            <htz-rate v-model="ceshi3" disHref="../../static/htz-rate/zidingyi.png" checkedHref="../../static/htz-rate/zidingyi1.png"></htz-rate>
            <view class="htz-item-msg">当前评分:{{ceshi3}}分</view>
        </view>
        <view class="htz-item">
            <view class="htz-title">内置类型</view>
            <div>
                <htz-rate v-model="ceshi2" :type="0"></htz-rate>
            </div>
            <div>
                <htz-rate v-model="ceshi2" :type="1"></htz-rate>
            </div>
            <div>
                <htz-rate v-model="ceshi2" :type="2"></htz-rate>
            </div>
            <div>
                <htz-rate v-model="ceshi2" :type="3"></htz-rate>
            </div>
            <div>
                <htz-rate v-model="ceshi2" :type="4"></htz-rate>
            </div>
            <div>
                <htz-rate v-model="ceshi2" :type="5"></htz-rate>
            </div>
        </view>
    </view>
</template>
<script>
    import htzRate from '@/components/htz-rate/htz-rate.vue'
    export default {
        data() {
            return {
                ceshi1: 0,
                ceshi2: 1,
                ceshi3: 0,
                ceshi4: 0,
                ceshi5: 0,
                ceshi6: 0,
                ceshi7: 2,
            }
        },
        onLoad() {

        },
        components: {
            htzRate,
        },
        methods: {
            ceshiChange(val) {
                uni.showToast({
                    title: '你选择了' + val + '分',
                    icon: 'none',
                    duration: 2000
                });
            },
        }
    }
</script>

备注

1. 关于样式，大家要是觉得丑，就手动改代码吧~
2. 有问题可以加QQ群 1163242725