ant-design-vue/components/date-picker/demo/size.vue

42 lines
978 B
Vue
Raw Normal View History

2021-09-01 07:04:46 +00:00
<docs>
---
order: 8
title:
zh-CN: 三种大小
en-US: Three Sizes
---
## zh-CN
三种大小的输入框若不设置则为 `default`
## en-US
The input box comes in three sizes. `default` will be used if `size` is omitted.
</docs>
<template>
<a-space direction="vertical" :size="12">
<a-radio-group v-model:value="size">
<a-radio-button value="large">Large</a-radio-button>
<a-radio-button value="default">Default</a-radio-button>
<a-radio-button value="small">Small</a-radio-button>
</a-radio-group>
<a-date-picker :size="size" />
<a-date-picker :size="size" placeholder="Select Month" picker="month" />
<a-range-picker :size="size" />
<a-date-picker :size="size" placeholder="Select Week" picker="week" />
</a-space>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
size: ref<string>('default'),
};
},
});
</script>