Skip to content

Rate 评分

介绍

用于快速的评级操作,或对评价进行展示。

基础用法

html
<template>
    <nut-cell custom-class="cell">
        <nut-rate v-model="value" />
    </nut-cell>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
    setup() {
        const value = ref(3);
        return { value }
    }
}
</script>

半星

html
<template>
    <nut-cell custom-class="cell">
        <nut-rate allow-half v-model="value"></nut-rate>
    </nut-cell>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
    setup() {
        const value = ref(3.5);
        return { value }
    }
}
</script>

自定义icon

html
<template>
    <nut-cell custom-class="cell">
        <nut-rate custom-icon="heart-fill" v-model="value" />
    </nut-cell>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
    setup() {
        const value = ref(3);
        return { value, HeartFill }
    }
}
</script>

自定义数量

html
<template>
    <nut-cell custom-class="cell">
        <nut-rate :count="6" v-model="value" />
    </nut-cell>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
    setup() {
        const value = ref(3);
        return { value }
    }
}
</script>

自定义颜色

html
<template>
    <nut-cell custom-class="cell">
        <nut-rate v-model="value" active-color="#FFC800"/>
    </nut-cell>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
    setup() {
        const value = ref(3);
        return { value }
    }
}
</script>

禁用状态

html
<template>
    <nut-cell custom-class="cell">
        <nut-rate disabled v-model="value" />
    </nut-cell>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
    setup() {
        const value = ref(3);
        return { value }
    }
}
</script>

只读状态

html
<template>
    <nut-cell custom-class="cell">
        <nut-rate v-model="value" readonly />
    </nut-cell>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
    setup() {
        const value = ref(3);
        return { value }
    }
}
</script>

绑定事件

html
<template>
    <nut-cell custom-class="cell">
        <nut-rate v-model="value" @change="onChange" />
    </nut-cell>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
    setup() {
        const value = ref(3);
        const onChange = (val)=>{
            console.log(val);
        }
    return { value,onChange }
    }
}
</script>

自定义尺寸 35px

html
<template>
    <nut-cell custom-class="cell">
        <nut-rate v-model="value" size="35" />
    </nut-cell>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
    setup() {
        const value = ref(3);
        return { value }
    }
}
</script>

API

Props

参数说明类型默认值
v-model当前 star 数,可使用 v-model 双向绑定数据number | string-
countstar 总数number | string5
active-color图标选中颜色string#fa200c
void-color图标未选中颜色string#ccc
allow-half是否半星Booleanfalse
readonly是否只读Booleanfalse
disabled是否禁用Booleanfalse
spacing间距number | string20
sizeIcon 尺寸大小,如 20px 2em 2remnumber | string-
custom-icon自定义 Iconstringstar-fill-n

Events

事件名说明回调参数
change当前分值修改时时触发的事件当前值

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件

名称默认值
--nut-rate-icon-colorvar(--nut-primary-color)
--nut-rate-icon-void-colorvar(--nut-disable-color)

MIT Licensed