ant-design-vue/components/time-picker/demo/basic.vue
2022-03-27 10:33:18 +08:00

46 lines
892 B
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<docs>
---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
点击 TimePicker然后可以在浮层中选择或者输入某一时间
## en-US
Click `TimePicker`, and then we could select or input a time in panel.
</docs>
<template>
<a-space direction="vertical">
<a-time-picker v-model:value="value" />
<a-time-picker v-model:value="strValue" value-format="HH:mm:ss" />
</a-space>
</template>
<script lang="ts">
import dayjs, { Dayjs } from 'dayjs';
import { defineComponent, ref, watch } from 'vue';
export default defineComponent({
setup() {
const value = ref<Dayjs>(dayjs('08:00:00', 'HH:mm:ss'));
const strValue = ref<string>('09:00:00');
watch(value, () => {
console.log(value.value);
});
watch(strValue, () => {
console.log(strValue.value);
});
return {
value,
strValue,
};
},
});
</script>