介绍
本文档主要用于描述 ShadcnNumber 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnNumber v-model="value" :dark="darkMode" />
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
const value = ref(0)
</script>尺寸 (size)
查看代码
vue
<template>
<ShadcnNumber v-model="value" size="small" :dark="darkMode" />
<ShadcnNumber v-model="value" size="default" :dark="darkMode" />
<ShadcnNumber v-model="value" size="large" :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const value = ref(0)
</script>类型 (type)
查看代码
vue
<template>
<ShadcnNumber v-model="value" size="small" type="primary" :dark="darkMode" />
<ShadcnNumber v-model="value" size="default" type="warning" :dark="darkMode" />
<ShadcnNumber v-model="value" size="large" type="success" :dark="darkMode" />
<ShadcnNumber v-model="value" size="large" type="error" :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const value = ref(0)
</script>禁用 (disabled)
查看代码
vue
<template>
<ShadcnNumber v-model="value" :dark="darkMode" />
<ShadcnNumber v-model="value" disabled :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const value = ref(0)
</script>占位符 (placeholder)
查看代码
vue
<template>
<ShadcnNumber v-model="value" placeholder="Enter Number" :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const value = ref(0)
</script>最小值 (min) & 最大值 (max)
查看代码
vue
<template>
<ShadcnNumber v-model="value" min="0" max="10" :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const value = ref(0)
</script>清空 (clearable)
查看代码
vue
<template>
<ShadcnNumber v-model="value" clearable placeholder="Enter Number" :dark="darkMode" />
<ShadcnNumber v-model="value" clearable placeholder="Enter Number" :dark="darkMode">
<template #clear>
<div class="h-4 w-4 p-2 flex items-center justify-center bg-gray-200 rounded-full text-sm text-gray-400 hover:bg-gray-300 hover:text-muted-foreground">X</div>
</template>
</ShadcnNumber>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const value = ref(0)
</script>显示控制器 (control)
查看代码
vue
<template>
<ShadcnNumber v-model="value" placeholder="Enter Number" :dark="darkMode" />
<ShadcnNumber v-model="value" placeholder="Enter Number" :dark="darkMode">
<template #add>
<div class="text-gray-300 w-4 h-4 m-1 flex items-center justify-center">A</div>
</template>
<template #minus>
<div class="text-gray-300 w-4 h-4 m-1 flex items-center justify-center">M</div>
</template>
</ShadcnNumber>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const value = ref(0)
</script>表单 (form)
液态玻璃效果 (glass)
查看代码
vue
<template>
<div class="p-6 rounded-lg bg-gradient-to-r from-purple-400 to-pink-400 dark:from-purple-900 dark:to-pink-900">
<div class="space-y-4">
<ShadcnNumber v-model="value1" glass :dark="darkMode" placeholder="请输入数字" />
<ShadcnNumber v-model="value2" glass type="success" :dark="darkMode" :min="0" :max="100" placeholder="范围 0-100" />
<ShadcnNumber v-model="value3" glass type="warning" :dark="darkMode" clearable placeholder="可清除" />
<ShadcnNumber v-model="value4" glass type="error" :dark="darkMode" :formatter="formatter" :parser="parser" placeholder="格式化显示" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
const value1 = ref(10)
const value2 = ref(50)
const value3 = ref(20)
const value4 = ref(1000)
const formatter = (value: number) => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
const parser = (value: string) => Number(value.replace(/¥\s?|(,*)/g, ''))
</script>