doc: add next site

pull/4671/head
tangjinzhou 3 years ago
parent c8fa9f3eed
commit 16f8d43a1a

@ -292,7 +292,6 @@ gulp.task(
function publish(tagString, done) {
let args = ['publish', '--with-antd-tools'];
args = args.concat(['--tag', 'next']);
if (tagString) {
args = args.concat(['--tag', tagString]);
}

@ -5,6 +5,12 @@ title: DatePicker
cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
---
To select or input a date.
## When To Use
By clicking the input box, you can select a date from a popup calendar.
## API
There are five kinds of picker:
@ -89,6 +95,7 @@ The following APIs are shared by DatePicker, RangePicker.
| size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | |
| suffixIcon | The custom suffix icon | v-slot:suffixIcon | - | |
| valueFormat | optional, format of binding value. If not specified, the binding value will be a Date object | string[date formats](https://day.js.org/docs/en/display/format) | - | |
### Common Events
| Events Name | Description | Arguments | Version |
@ -116,6 +123,7 @@ The following APIs are shared by DatePicker, RangePicker.
| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | |
| showToday | Whether to show `Today` button | boolean | true | |
| value(v-model) | To set date | [dayjs](https://day.js.org/) | - | |
### DatePicker Events
| Events Name | Description | Arguments | Version |
@ -147,6 +155,7 @@ The following APIs are shared by DatePicker, RangePicker.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-wo` | |
### RangePicker
| Property | Description | Type | Default | Version |
@ -167,13 +176,13 @@ The following APIs are shared by DatePicker, RangePicker.
### RangePicker Events
| Events Name | Description | Arguments | Version |
| --- | --- | --- | --- |
| --- | --- | --- | --- | --- |
| calendarChange | Callback function, can be executed when the start time or the end time of the range is changing. | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |
| change | a callback function, can be executed when the selected time is changing | function(dates: \[dayjs, dayjs\] \| \[string, string\], dateStrings: \[string, string\]) | |
| ok | callback when click ok button | function(dates: \[dayjs, dayjs\] \| \[string, string\]) | |
## FAQ
### How to use DatePicker with customize date librarylike moment.js \| dayjs \| date-fns
Please refer [replace date](/docs/vue/replace-date)

@ -6,6 +6,12 @@ subtitle: 日期选择框
cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
---
输入或选择日期的控件。
## 何时使用
当用户需要输入一个日期,可以点击标准输入框,弹出日期面板进行选择。
## API
日期类组件包括以下五种形式。
@ -89,7 +95,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | |
| size | 输入框大小,`large` 高度为 40px`small` 为 24px默认是 32px | `large` \| `middle` \| `small` | - | |
| suffixIcon | 自定义的选择框后缀图标 | v-slot:suffixIcon | - | |
| valueFormat | 可选,绑定值的格式,对 value、defaultValue、defaultPickerValue 起作用。不指定则绑定值为 dayjs 对象 | string[具体格式](https://day.js.org/docs/zh-CN/display/format) | - | |
| valueFormat | 可选,绑定值的格式,对 value、defaultValue、defaultPickerValue 起作用。不指定则绑定值为 dayjs 对象 | string[具体格式](https://day.js.org/docs/zh-CN/display/format) | - | |
### 共有的事件
@ -121,10 +127,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
### DatePicker 事件
| 事件名称 | 说明 | 回调参数 |
| -------- | ------------------ | ---------------------------------------------------- |
| 事件名称 | 说明 | 回调参数 |
| -------- | ------------------ | --------------------------------------------------- |
| change | 时间发生变化的回调 | function(date: dayjs \| string, dateString: string) |
| ok | 点击确定按钮的回调 | function(date: dayjs \| string) |
| ok | 点击确定按钮的回调 | function(date: dayjs \| string) |
### DatePicker\[picker=year]
@ -153,7 +159,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
### RangePicker
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] | |
@ -168,15 +173,17 @@ cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒,[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | |
| value(v-model) | 日期 | [dayjs](https://day.js.org/)\[] | - | |
### RangePicker 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| calendarChange | 待选日期发生变化的回调 | function(dates: \[dayjs, dayjs\] \| \[string, string\], dateStrings: \[string, string\], info: { range:`start`\|`end` }) |
| calendarChange | 待选日期发生变化的回调 | function(dates: \[dayjs, dayjs\] \| \[string, string\], dateStrings: \[string, string\], info: { range:`start`\|`end` }) |
| change | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs\] \| \[string, string\], dateStrings: \[string, string\]) |
| ok | 点击确定按钮的回调 | function(dates: \[dayjs, dayjs\] \| \[string, string\]) |
## FAQ
### 如何在 DatePicker 中使用自定义日期库(如 moment.js \| dayjs \| date-fns
请参考[《自定义日期库》](/docs/vue/replace-date-cn)
@ -184,4 +191,3 @@ cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
### 为何全局修改 dayjs.locale 不生效?
DatePicker 默认 `locale``en`。你可以通过 DatePicker 的 `locale` 属性来单独设置,也可以通过 [ConfigProvider `locale`](/components/config-provider-cn) 属性来配置。

@ -1,6 +1,6 @@
{
"name": "ant-design-vue",
"version": "2.2.7",
"version": "3.0.0-alpha.0",
"title": "Ant Design Vue",
"description": "An enterprise-class UI design language and Vue-based implementation",
"keywords": [
@ -50,7 +50,7 @@
"codecov": "codecov",
"routes": "node site/scripts/genrateRoutes.js",
"tsc": "tsc --noEmit",
"site": "yarn routes && ./node_modules/vite/bin/vite.js build site --base=https://aliyuncdn.antdv.com/v2/",
"site": "yarn routes && ./node_modules/vite/bin/vite.js build site --base=https://next.antdv.com/",
"pub:site": "npm run site && node scripts/pushToOSS.js"
},
"repository": {

@ -16,7 +16,7 @@
name="keywords"
content="ant design vue,ant-design-vue,ant-design-vue admin,ant design pro,vue ant design,vue ant design pro,vue ant design admin,ant design vue官网,ant design vue中文文档,ant design vue文档"
/>
<link rel="shortcut icon" type="image/x-icon" href="https://qn.antdv.com/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="https://aliyuncdn.antdv.com/favicon.ico" />
<style id="nprogress-style">
#nprogress {
display: none;

@ -8,22 +8,20 @@ const accessKeyId = process.env.ALI_OSS_ACCESSKEY;
const accessKeySecret = process.env.ALI_OSS_SECRETKEY;
const client = new OSS({
bucket: 'antdv-beijing',
bucket: 'next-antdv',
cname: 'true',
endpoint: 'aliyuncdn.antdv.com',
// region以杭州为例oss-cn-hangzhou其他region按实际情况填写。
endpoint: 'next-antdv.oss-cn-beijing.aliyuncs.com',
region: 'oss-cn-beijing',
// 阿里云主账号AccessKey拥有所有API的访问权限风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维请登录RAM控制台创建RAM账号。
accessKeyId,
accessKeySecret,
});
const assetsPath = path.join(process.cwd(), 'site', 'dist', 'assets');
const put = file => {
const put = (target, source) => {
return new Promise((reslove, reject) => {
client
.put(`v2/assets/${file}`, path.join(assetsPath, file))
.put(target, source)
.then(res => {
if (res.res.status !== 200) {
console.log(`${res.name} upload failed!`);
@ -50,9 +48,10 @@ async function upload() {
});
for (const file of files) {
if (file.isFile()) {
await put(file.name);
await put(`assets/${file.name}`, path.join(assetsPath, file.name));
}
}
await put('index.html', path.join(process.cwd(), 'site', 'dist', 'index.html'));
} catch (err) {
console.error(err);
}

Loading…
Cancel
Save