介绍
本文档主要用于描述 ShadcnTimePicker 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnTimePicker v-model="value" :dark="darkMode" />
</template>占位符 (placeholder)
查看代码
vue
<template>
<ShadcnTimePicker v-model="value" placeholder="Enter string" :dark="darkMode" />
</template>禁用 (disabled)
查看代码
vue
<template>
<ShadcnTimePicker v-model="value" disabled :dark="darkMode" />
<ShadcnTimePicker v-model="value" :disabled="false" :dark="darkMode" />
</template>清空 (clearable)
查看代码
vue
<template>
<ShadcnTimePicker v-model="value" clearable :dark="darkMode" />
<ShadcnTimePicker v-model="value" :clearable="false" :dark="darkMode" />
</template>快捷时间 (quick-times)
查看代码
vue
<template>
<ShadcnTimePicker v-model="value" :quickTimes="['09:00', '12:00', '18:00']" :dark="darkMode" />
</template>格式 (format)
查看代码
vue
<template>
<ShadcnTimePicker v-model="value" format="HH:mm" :dark="darkMode" />
<ShadcnTimePicker v-model="value" format="HH:mm:ss" :dark="darkMode" />
<ShadcnTimePicker v-model="value" format="hh:mm A" :dark="darkMode" />
<ShadcnTimePicker v-model="value" format="hh:mm:ss A" :dark="darkMode" />
</template>液态玻璃效果 (glass)
查看代码
vue
<template>
<div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-indigo-900 to-purple-900' : 'bg-gradient-to-r from-indigo-400 to-purple-400']">
<div class="space-y-4">
<ShadcnTimePicker v-model="glassValue1" glass :dark="darkMode" />
<ShadcnTimePicker v-model="glassValue2" glass :dark="darkMode" format="HH:mm:ss" />
<ShadcnTimePicker v-model="glassValue3" glass :dark="darkMode" :quickTimes="['09:00', '12:00', '18:00']" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const glassValue1 = ref('09:00')
const glassValue2 = ref('12:30:45')
const glassValue3 = ref('14:00')
</script>