介绍

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

用法

查看代码

<template>
    <ShadcnNumber v-model="value" />
</template>

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

const value = ref(0)
</script>

尺寸 (size)

查看代码

<template>
    <ShadcnNumber v-model="value" size="small" />
    <ShadcnNumber v-model="value" size="default" />
    <ShadcnNumber v-model="value" size="large" />
</template>

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

const value = ref(0)
</script>

类型 (type)

查看代码

<template>
    <ShadcnNumber v-model="value" size="small" type="primary"/>
    <ShadcnNumber v-model="value" size="default" type="warning"/>
    <ShadcnNumber v-model="value" size="large" type="success"/>
    <ShadcnNumber v-model="value" size="large" type="error"/>
</template>

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

const value = ref(0)
</script>

禁用 (disabled)

查看代码

<template>
    <ShadcnNumber v-model="value"/>
    <ShadcnNumber v-model="value" disabled />
</template>

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

const value = ref(0)
</script>

占位符 (placeholder)

查看代码

<template>
    <ShadcnNumber v-model="value" placeholder="Enter Number"/>
</template>

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

const value = ref(0)
</script>

最小值 (min) & 最大值 (max)

查看代码

<template>
    <ShadcnNumber v-model="value" min="0" max="10"/>
</template>

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

const value = ref(0)
</script>

清空 (clearable)

查看代码

<template>
    <ShadcnNumber v-model="value" clearable placeholder="Enter Number"/>
    <ShadcnNumber v-model="value" clearable placeholder="Enter Number">
      <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)

查看代码

<template>
    <ShadcnNumber v-model="value" placeholder="Enter Number"/>
    <ShadcnNumber v-model="value" placeholder="Enter Number">
      <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)

数字输入框 (Number) 属性

数字输入框 (Number) 插槽

数字输入框 (Number) 事件