ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2026-05-16 01:07:43 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

docs: prettier all markdown files

Browse Source
This commit is contained in:
chenjiahan
2020-04-11 09:09:00 +08:00
committed by neverland
parent 48067f79db
commit 7f84f8a487
140 changed files with 4441 additions and 4723 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/calendar/README.md
+63 -79
View File
@@ -29,7 +29,7 @@ export default {
data() {
return {
date: '',
show: false
show: false,
};
},
methods: {
@@ -39,8 +39,8 @@ export default {
onConfirm(date) {
this.show = false;
this.date = this.formatDate(date);
}
}
},
},
};
```
@@ -56,21 +56,21 @@ export default {
data() {
return {
text: '',
show: false
show: false,
};
},
methods: {
onConfirm(date) {
this.show = false;
this.text = `${date.length} dates selected`;
}
}
},
},
};
```
### Select Date Range
You can select a date range after setting `type` to` range`. In range mode, the date returned by the `confirm` event is an array, the first item in the array is the start time and the second item is the end time.
You can select a date range after setting `type` to`range`. In range mode, the date returned by the `confirm` event is an array, the first item in the array is the start time and the second item is the end time.
```html
<van-cell title="Select Date Range" :value="date" @click="show = true" />
@@ -82,7 +82,7 @@ export default {
data() {
return {
date: '',
show: false
show: false,
};
},
methods: {
@@ -93,14 +93,14 @@ export default {
const [start, end] = date;
this.show = false;
this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
}
}
},
},
};
```
### Quick Select
Set `show-confirm` to` false` to hide the confirm button. In this case, the `confirm` event will be triggered immediately after the selection is completed.
Set `show-confirm` to`false` to hide the confirm button. In this case, the `confirm` event will be triggered immediately after the selection is completed.
```html
<van-calendar v-model="show" :show-confirm="false" />
@@ -119,11 +119,7 @@ Use `color` prop to custom calendar color
Use `min-date` and `max-date` to custom date range
```html
<van-calendar
v-model="show"
:min-date="minDate"
:max-date="maxDate"
/>
<van-calendar v-model="show" :min-date="minDate" :max-date="maxDate" />
```
```js
@@ -132,9 +128,9 @@ export default {
return {
show: false,
minDate: new Date(2010, 0, 1),
maxDate: new Date(2010, 0, 31)
maxDate: new Date(2010, 0, 31),
};
}
},
};
```
@@ -156,11 +152,7 @@ Use `confirm-text` and `confirm-disabled-text` to custom confirm text
Use `formatter` to custom day text
```html
<van-calendar
v-model="show"
type="range"
:formatter="formatter"
/>
<van-calendar v-model="show" type="range" :formatter="formatter" />
```
```js
@@ -187,9 +179,9 @@ export default {
}
return day;
}
}
}
},
},
};
```
### Custom Position
@@ -197,11 +189,7 @@ export default {
Use `position` to custom popup position，can be set to `top`、`left`、`right`
```html
<van-calendar
v-model="show"
:round="false"
position="right"
/>
<van-calendar v-model="show" :round="false" position="right" />
```
### Max Range
@@ -209,11 +197,7 @@ Use `position` to custom popup position，can be set to `top`、`left`、`right`
When selecting a date range, you can use the `max-range` prop to specify the maximum number of selectable days
```html
<van-calendar
type="range"
:max-range="3"
:style="{ height: '500px' }"
/>
<van-calendar type="range" :max-range="3" :style="{ height: '500px' }" />
```
### Tiled display
@@ -234,35 +218,35 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
### Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| type `v2.5.4` | Type，can be set to `range` `multiple` | *string* | `single` |
| title | Title of calendar | *string* | `Calendar` |
| color | Color for the bottom button and selected date | *string* | `#ee0a24` |
| min-date | Min date | *Date* | Today |
| max-date | Max date | *Date* | Six months after the today |
| default-date | Default selected date | *Date \| Date[]* | Today |
| row-height | Row height | *number \| string* | `64` |
| formatter | Day formatter | *(day: Day) => Day* | - |
| poppable | Whether to show the calendar inside a popup | *boolean* | `true` |
| show-mark | Whether to show background month mark | *boolean* | `true` |
| show-title `v2.5.5` | Whether to show title | *boolean* | `true` |
| show-subtitle `v2.5.5` | Whether to show subtitle | *boolean* | `true` |
| show-confirm | Whether to show confirm button | *boolean* | `true` |
| confirm-text | Confirm button text | *string* | `Confirm` |
| confirm-disabled-text | Confirm button text when disabled | *string* | `Confirm` |
| --- | --- | --- | --- |
| type `v2.5.4` | Type，can be set to `range` `multiple` | _string_ | `single` |
| title | Title of calendar | _string_ | `Calendar` |
| color | Color for the bottom button and selected date | _string_ | `#ee0a24` |
| min-date | Min date | _Date_ | Today |
| max-date | Max date | _Date_ | Six months after the today |
| default-date | Default selected date | _Date \| Date[]_ | Today |
| row-height | Row height | _number \| string_ | `64` |
| formatter | Day formatter | _(day: Day) => Day_ | - |
| poppable | Whether to show the calendar inside a popup | _boolean_ | `true` |
| show-mark | Whether to show background month mark | _boolean_ | `true` |
| show-title `v2.5.5` | Whether to show title | _boolean_ | `true` |
| show-subtitle `v2.5.5` | Whether to show subtitle | _boolean_ | `true` |
| show-confirm | Whether to show confirm button | _boolean_ | `true` |
| confirm-text | Confirm button text | _string_ | `Confirm` |
| confirm-disabled-text | Confirm button text when disabled | _string_ | `Confirm` |
### Poppable Props
Following props are supported when the poppable is true
| Attribute | Description | Type | Default |
|------|------|------|------|
| v-model | Whether to show calendar | *boolean* | `false` |
| position | Popup position, can be set to `top` `right` `left` | *string* | `bottom` |
| round | Whether to show round corner | *boolean* | `true` |
| close-on-popstate `v2.4.4` | Whether to close when popstate | *boolean* | `false` |
| close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` |
| --- | --- | --- | --- |
| v-model | Whether to show calendar | _boolean_ | `false` |
| position | Popup position, can be set to `top` `right` `left` | _string_ | `bottom` |
| round | Whether to show round corner | _boolean_ | `true` |
| close-on-popstate `v2.4.4` | Whether to close when popstate | _boolean_ | `false` |
| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
| get-container `v2.4.4` | Return the mount node for Calendar | _string \| () => Element_ | - |
### Range Props
@@ -270,28 +254,28 @@ Following props are supported when the poppable is true
Following props are supported when the type is range
| Attribute | Description | Type | Default |
|------|------|------|------|
| max-range `v2.4.3` | Number of selectable days | *number \| string* | - |
| range-prompt `v2.4.3` | Error message when exceeded max range | *string* | `Choose no more than xx days` |
| allow-same-day `v2.5.6` | Whether the start and end time of the range is allowed on the same day | *boolean* | `fasle` |
| --- | --- | --- | --- |
| max-range `v2.4.3` | Number of selectable days | _number \| string_ | - |
| range-prompt `v2.4.3` | Error message when exceeded max range | _string_ | `Choose no more than xx days` |
| allow-same-day `v2.5.6` | Whether the start and end time of the range is allowed on the same day | _boolean_ | `fasle` |
### Data Structure of Day
| Key | Description | Type |
|------|------|------|
| date | Date | *Date* |
| type | Type, can be set to `selected`、`start`、`middle`、`end`、`disabled` | *string* |
| text | Text | *string* |
| topInfo | Top info | *string* |
| bottomInfo | Bottom info | *string* |
| className | Extra className | *string* |
| --- | --- | --- |
| date | Date | _Date_ |
| type | Type, can be set to `selected`、`start`、`middle`、`end`、`disabled` | _string_ |
| text | Text | _string_ |
| topInfo | Top info | _string_ |
| bottomInfo | Bottom info | _string_ |
| className | Extra className | _string_ |
### Events
| Event | Description | Arguments |
|------|------|------|
| select | Triggered when select date | *value: Date \| Date[]* |
| confirm | Triggered after date selection is complete，if `show-confirm` is` true`, it is triggered after clicking the confirm button | *value: Date \| Date[]* |
| --- | --- | --- |
| select | Triggered when select date | _value: Date \| Date[]_ |
| confirm | Triggered after date selection is complete，if `show-confirm` is`true`, it is triggered after clicking the confirm button | _value: Date \| Date[]_ |
| open `v2.5.2` | Triggered when open Popup | - |
| close `v2.5.2` | Triggered when close Popup | - |
| opened `v2.5.2` | Triggered when opened Popup | - |
@@ -299,15 +283,15 @@ Following props are supported when the type is range
### Slots
| Name | Description |
|------|------|
| title | Custom title |
| Name | Description |
| ------ | ------------- |
| title | Custom title |
| footer | Custom fotter |
### Methods
Use [ref](https://vuejs.org/v2/api/#ref) to get Calendar instance and call instance methods
| Name | Description | Attribute | Return value |
|------|------|------|------|
| reset | Reset selected date to default date | - | - |
| Name | Description | Attribute | Return value |
| ----- | ----------------------------------- | --------- | ------------ |
| reset | Reset selected date to default date | - | - |
src/calendar/README.zh-CN.md
+62 -78
View File
@@ -29,7 +29,7 @@ export default {
data() {
return {
date: '',
show: false
show: false,
};
},
methods: {
@@ -39,8 +39,8 @@ export default {
onConfirm(date) {
this.show = false;
this.date = this.formatDate(date);
}
}
},
},
};
```
@@ -58,15 +58,15 @@ export default {
data() {
return {
text: '',
show: false
show: false,
};
},
methods: {
onConfirm(date) {
this.show = false;
this.text = `选择了 ${date.length} 个日期`;
}
}
},
},
};
```
@@ -84,7 +84,7 @@ export default {
data() {
return {
date: '',
show: false
show: false,
};
},
methods: {
@@ -95,8 +95,8 @@ export default {
const [start, end] = date;
this.show = false;
this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
}
}
},
},
};
```
@@ -121,11 +121,7 @@ export default {
通过`min-date`和`max-date`定义日历的范围
```html
<van-calendar
v-model="show"
:min-date="minDate"
:max-date="maxDate"
/>
<van-calendar v-model="show" :min-date="minDate" :max-date="maxDate" />
```
```js
@@ -134,9 +130,9 @@ export default {
return {
show: false,
minDate: new Date(2010, 0, 1),
maxDate: new Date(2010, 0, 31)
maxDate: new Date(2010, 0, 31),
};
}
},
};
```
@@ -158,11 +154,7 @@ export default {
通过传入`formatter`函数来对日历上每一格的内容进行格式化
```html
<van-calendar
v-model="show"
type="range"
:formatter="formatter"
/>
<van-calendar v-model="show" type="range" :formatter="formatter" />
```
```js
@@ -189,9 +181,9 @@ export default {
}
return day;
}
}
}
},
},
};
```
### 自定义弹出位置
@@ -199,11 +191,7 @@ export default {
通过`position`属性自定义弹出层的弹出位置，可选值为`top`、`left`、`right`
```html
<van-calendar
v-model="show"
:round="false"
position="right"
/>
<van-calendar v-model="show" :round="false" position="right" />
```
### 日期区间最大范围
@@ -211,11 +199,7 @@ export default {
选择日期区间时，可以通过`max-range`属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案
```html
<van-calendar
type="range"
:max-range="3"
:style="{ height: '500px' }"
/>
<van-calendar type="range" :max-range="3" :style="{ height: '500px' }" />
```
### 平铺展示
@@ -236,66 +220,66 @@ export default {
### Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| type `v2.5.4` | 选择类型:<br>`single`表示选择单个日期，<br>`multiple`表示选择多个日期，<br>`range`表示选择日期区间 | *string* | `single` |
| title | 日历标题 | *string* | `日期选择` |
| color | 主题色，对底部按钮和选中日期生效 | *string* | `#ee0a24` |
| min-date | 可选择的最小日期 | *Date* | 当前日期 |
| max-date | 可选择的最大日期 | *Date* | 当前日期的六个月后 |
| default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | *Date \| Date[]* | 今天 |
| row-height | 日期行高 | *number \| string* | `64` |
| formatter | 日期格式化函数 | *(day: Day) => Day* | - |
| poppable | 是否以弹层的形式展示日历 | *boolean* | `true` |
| show-mark | 是否显示月份背景水印 | *boolean* | `true` |
| show-title `v2.5.5` | 是否展示日历标题 | *boolean* | `true` |
| show-subtitle `v2.5.5` | 是否展示日历副标题（年月） | *boolean* | `true` |
| show-confirm | 是否展示确认按钮 | *boolean* | `true` |
| confirm-text | 确认按钮的文字 | *string* | `确定` |
| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` |
| --- | --- | --- | --- |
| type `v2.5.4` | 选择类型:<br>`single`表示选择单个日期，<br>`multiple`表示选择多个日期，<br>`range`表示选择日期区间 | _string_ | `single` |
| title | 日历标题 | _string_ | `日期选择` |
| color | 主题色，对底部按钮和选中日期生效 | _string_ | `#ee0a24` |
| min-date | 可选择的最小日期 | _Date_ | 当前日期 |
| max-date | 可选择的最大日期 | _Date_ | 当前日期的六个月后 |
| default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | _Date \| Date[]_ | 今天 |
| row-height | 日期行高 | _number \| string_ | `64` |
| formatter | 日期格式化函数 | _(day: Day) => Day_ | - |
| poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` |
| show-mark | 是否显示月份背景水印 | _boolean_ | `true` |
| show-title `v2.5.5` | 是否展示日历标题 | _boolean_ | `true` |
| show-subtitle `v2.5.5` | 是否展示日历副标题（年月） | _boolean_ | `true` |
| show-confirm | 是否展示确认按钮 | _boolean_ | `true` |
| confirm-text | 确认按钮的文字 | _string_ | `确定` |
| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` |
### Poppable Props
当 Canlendar 的 `poppable` 为 `true` 时，支持以下 props:
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| v-model | 是否显示日历弹窗 | *boolean* | `false` |
| position | 弹出位置，可选值为 `top` `right` `left` | *string* | `bottom` |
| round | 是否显示圆角弹窗 | *boolean* | `true` |
| close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | *boolean* | `false` |
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` |
| get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - |
| --- | --- | --- | --- |
| v-model | 是否显示日历弹窗 | _boolean_ | `false` |
| position | 弹出位置，可选值为 `top` `right` `left` | _string_ | `bottom` |
| round | 是否显示圆角弹窗 | _boolean_ | `true` |
| close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
| get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
### Range Props
当 Canlendar 的 `type` 为 `range` 时，支持以下 props:
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | *number \| string* | - |
| range-prompt `v2.4.3` | 范围选择超过最多可选天数时的提示文案 | *string* | `选择天数不能超过 xx 天` |
| allow-same-day `v2.5.6` | 是否允许日期范围的起止时间为同一天 | *boolean* | `fasle` |
| --- | --- | --- | --- |
| max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | _number \| string_ | - |
| range-prompt `v2.4.3` | 范围选择超过最多可选天数时的提示文案 | _string_ | `选择天数不能超过 xx 天` |
| allow-same-day `v2.5.6` | 是否允许日期范围的起止时间为同一天 | _boolean_ | `fasle` |
### Day 数据结构
日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容
| 键名 | 说明 | 类型 |
|------|------|------|
| date | 日期对应的 Date 对象 | *Date* |
| type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | *string* |
| text | 中间显示的文字 | *string* |
| topInfo | 上方的提示信息 | *string* |
| bottomInfo | 下方的提示信息 | *string* |
| className | 额外类名 | *string* |
| --- | --- | --- |
| date | 日期对应的 Date 对象 | _Date_ |
| type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | _string_ |
| text | 中间显示的文字 | _string_ |
| topInfo | 上方的提示信息 | _string_ |
| bottomInfo | 下方的提示信息 | _string_ |
| className | 额外类名 | _string_ |
### Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| select | 点击任意日期时触发 | *value: Date \| Date[]* |
| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | *value: Date \| Date[]* |
| --- | --- | --- |
| select | 点击任意日期时触发 | _value: Date \| Date[]_ |
| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_ |
| open `v2.5.2` | 打开弹出层时触发 | - |
| close `v2.5.2` | 关闭弹出层时触发 | - |
| opened `v2.5.2` | 打开弹出层且动画结束后触发 | - |
@@ -303,18 +287,18 @@ export default {
### Slots
| 名称 | 说明 |
|------|------|
| title | 自定义标题 |
| 名称 | 说明 |
| ------ | ------------------ |
| title | 自定义标题 |
| footer | 自定义底部区域内容 |
### 方法
通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------|
| reset | 重置选中的日期到默认值 | - | - |
| 方法名 | 说明 | 参数 | 返回值 |
| ------ | ---------------------- | ---- | ------ |
| reset | 重置选中的日期到默认值 | - | - |
## 常见问题