Viog UI

评分 rate 待优化

用于评分交互

使用说明

简单引入

在vi-rate组件中添加vi-rate-item组件自定义评分点数量

通过v-model绑定一个数据类型为number的变量调控当前评分，评分范围为0~n（n为评分点数量）

展开代码
<template>
    <vi-rate v-model="rateOne">
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
    </vi-rate>
</tempalte>

<script>
    const rateOne = ref(0)
</script>

样式

你可以通过type属性更换评分样式，默认样式为star

展开代码
<template>
    <vi-rate v-model="rateTwo" type="star">
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
    </vi-rate>
    <vi-divider/>
    <vi-rate v-model="rateTwo" type="love">
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
    </vi-rate>
    <vi-divider/>
    <vi-rate v-model="rateTwo" type="flower">
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
    </vi-rate>
    <vi-divider/>
    <vi-rate v-model="rateTwo" type="smile">
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
    </vi-rate>
</template>

<script>
    const rateTwo = ref(0)
</script>

颜色

通过调控--vi-rate-default-color与--vi-rate-active-colorcss属性，设置默认颜色与评分颜色

展开代码
<template>
    <vi-rate v-model="rateThree" type="love" style="--vi-rate-default-color: var(--vi-pink-color3); --vi-rate-active-color: var(--vi-red-color1);">
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
    </vi-rate>
</template>

<script>
    const rateThree = ref(0)
</script>

评分模式

可以通过mode属性更换评分模式

评分为: 0
评分为: 0
评分为: 0.00
展开代码
<template>
    <vi-rate v-model="rateFour" mode="total">
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
    </vi-rate>
    评分为: {{ rateFour }}
    <vi-divider/>
    <vi-rate v-model="rateFive" mode="half">
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
    </vi-rate>
    评分为: {{ rateFive }}
    <vi-divider/>
    <vi-rate v-model="rateSix" mode="free">
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
    </vi-rate>
    评分为: {{ rateSix.toFixed(2) }}
</template>

触发模式

可以通过trigger属性更换评分触发模式，滑动或点击

展开代码
<template>
    <vi-rate v-model="rateSeven" trigger="click">
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
        <vi-rate-item/>
    </vi-rate>
</template>

Props

rate

属性名描述类型默认值

插槽

rate

插槽名描述有无默认内容

可覆写css变量

变量名描述默认值