介绍
本文档主要用于描述 ShadcnRate 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnRate v-model="rate" :dark="darkMode" />
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
const rate = ref(1)
</script>最大值 (max)
查看代码
vue
<template>
<ShadcnRate v-model="rate" max="10" :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const rate = ref(1)
</script>允许半选 (allow-half)
查看代码
vue
<template>
<ShadcnRate v-model="rate" allow-half :dark="darkMode" />
<ShadcnRate v-model="rate" allow-half :dark="darkMode">
<template #character>Love</template>
</ShadcnRate>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const rate = ref(1)
</script>类型 (type)
查看代码
vue
<template>
<ShadcnRate v-model="rate" max="10" type="primary" :dark="darkMode" />
<ShadcnRate v-model="rate" max="10" type="success" :dark="darkMode" />
<ShadcnRate v-model="rate" max="10" type="warning" :dark="darkMode" />
<ShadcnRate v-model="rate" max="10" allow-half type="error" :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const rate = ref(1)
</script>禁用 (disabled)
查看代码
vue
<template>
<ShadcnRate v-model="rate" disabled :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const rate = ref(1)
</script>显示文本 (show-text)
查看代码
vue
<template>
<ShadcnRate v-model="rate" show-text :dark="darkMode" />
<ShadcnRate v-model="rate" show-text :dark="darkMode">
<template #text>Love</template>
</ShadcnRate>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const rate = ref(1)
</script>液态玻璃效果 (glass)
查看代码
vue
<template>
<div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-blue-900 to-indigo-900' : 'bg-gradient-to-r from-blue-400 to-indigo-400']">
<div class="flex flex-col gap-4">
<ShadcnRate v-model="rateValue1" glass :dark="isDark" />
<ShadcnRate v-model="rateValue2" glass type="success" :dark="isDark" show-text />
<ShadcnRate v-model="rateValue3" glass type="warning" :dark="isDark" allow-half />
<ShadcnRate v-model="rateValue4" glass type="error" :dark="isDark" show-text allow-half />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isDark = ref(false)
const rateValue1 = ref(3)
const rateValue2 = ref(4)
const rateValue3 = ref(3.5)
const rateValue4 = ref(4.5)
</script>