介绍

本文档主要用于描述 ShadcnRate 组件的一些特性和用法。

用法

查看代码

<template>
    <ShadcnRate v-model="rate" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const rate = ref(1)
</script>

最大值 (max)

查看代码

<template>
    <ShadcnRate v-model="rate" max="10" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const rate = ref(1)
</script>

允许半选 (allow-half)

查看代码

<template>
    <ShadcnRate v-model="rate" allow-half />
    <ShadcnRate v-model="rate" allow-half>
        <template #character>Love</template>
    </ShadcnRate>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const rate = ref(1)
</script>

类型 (type)

查看代码

<template>
    <ShadcnRate v-model="rate" max="10" type="primary"/>
    <ShadcnRate v-model="rate" max="10" type="success"/>
    <ShadcnRate v-model="rate" max="10" type="warning"/>
    <ShadcnRate v-model="rate" max="10" allow-half type="error"/>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const rate = ref(1)
</script>

禁用 (disabled)

查看代码

<template>
    <ShadcnRate v-model="rate" disabled />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const rate = ref(1)
</script>

显示文本 (show-text)

查看代码

<template>
    <ShadcnRate v-model="rate" show-text />
    <ShadcnRate v-model="rate" show-text>
        <template #text>Love</template>
    </ShadcnRate>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const rate = ref(1)
</script>

评分 (Rate) 属性

评分 (Rate) 插槽