github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

doc: add next site

Browse Source
pull/4671/head
tangjinzhou 3 years ago
parent c8fa9f3eed
commit 16f8d43a1a
6 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File

1
antd-tools/gulpfile.js
Unescape View File

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

13
components/date-picker/index.en-US.md
Unescape View File

@ -5,6 +5,12 @@ title: DatePicker
cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg 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 ## API
There are five kinds of picker: 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` | - | | | 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 | - | | | 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) | - | | | 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 ### Common Events
| Events Name | Description | Arguments | Version | | 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() | | | 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 | | | showToday | Whether to show `Today` button | boolean | true | |
| value(v-model) | To set date | [dayjs](https://day.js.org/) | - | | | value(v-model) | To set date | [dayjs](https://day.js.org/) | - | |
### DatePicker Events ### DatePicker Events
| Events Name | Description | Arguments | Version | | Events Name | Description | Arguments | Version |
@ -147,6 +155,7 @@ The following APIs are shared by DatePicker, RangePicker.
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-wo` | | | format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-wo` | |
### RangePicker ### RangePicker
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
@ -167,13 +176,13 @@ The following APIs are shared by DatePicker, RangePicker.
### RangePicker Events ### RangePicker Events
| Events Name | Description | Arguments | Version | | 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` }) | - | | | 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\]) | | | 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\]) | | | ok | callback when click ok button | function(dates: \[dayjs, dayjs\] \| \[string, string\]) | |
## FAQ ## FAQ
### How to use DatePicker with customize date library（like moment.js \| dayjs \| date-fns）？ ### How to use DatePicker with customize date library（like moment.js \| dayjs \| date-fns）？
Please refer [replace date](/docs/vue/replace-date) Please refer [replace date](/docs/vue/replace-date)

20
components/date-picker/index.zh-CN.md
Unescape View File

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

4
package.json
Unescape View File

@ -1,6 +1,6 @@
{ {
"name": "ant-design-vue", "name": "ant-design-vue",
"version": "2.2.7", "version": "3.0.0-alpha.0",
"title": "Ant Design Vue", "title": "Ant Design Vue",
"description": "An enterprise-class UI design language and Vue-based implementation", "description": "An enterprise-class UI design language and Vue-based implementation",
"keywords": [ "keywords": [
@ -50,7 +50,7 @@
"codecov": "codecov", "codecov": "codecov",
"routes": "node site/scripts/genrateRoutes.js", "routes": "node site/scripts/genrateRoutes.js",
"tsc": "tsc --noEmit", "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" "pub:site": "npm run site && node scripts/pushToOSS.js"
}, },
"repository": { "repository": {

2
site/index.html
Unescape View File

@ -16,7 +16,7 @@
name="keywords" 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文档" 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"> <style id="nprogress-style">
#nprogress { #nprogress {
display: none; display: none;

13
site/scripts/pushToOSS.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save