alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: migrate Calendar component

Browse Source
This commit is contained in:
chenjiahan
2020-08-09 21:31:44 +08:00
parent a6888944ea
commit 0dd713f361
9 changed files with 93 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/calendar/README.md
+10 -10
View File
@@ -21,7 +21,7 @@ The `confirm` event will be triggered after the date selection is completed.
```html
<van-cell title="Select Single Date" :value="date" @click="show = true" />
<van-calendar v-model="show" @confirm="onConfirm" />
<van-calendar v-model:show="show" @confirm="onConfirm" />
```
```js
@@ -48,7 +48,7 @@ export default {
```html
<van-cell title="Select Multiple Date" :value="text" @click="show = true" />
<van-calendar v-model="show" type="multiple" @confirm="onConfirm" />
<van-calendar v-model:show="show" type="multiple" @confirm="onConfirm" />
```
```js
@@ -74,7 +74,7 @@ You can select a date range after setting `type` to`range`. In range mode, the d
```html
<van-cell title="Select Date Range" :value="date" @click="show = true" />
<van-calendar v-model="show" type="range" @confirm="onConfirm" />
<van-calendar v-model:show="show" type="range" @confirm="onConfirm" />
```
```js
@@ -103,7 +103,7 @@ export default {
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" />
<van-calendar v-model:show="show" :show-confirm="false" />
```
### Custom Color
@@ -111,7 +111,7 @@ Set `show-confirm` to `false` to hide the confirm button. In this case, the `con
Use `color` prop to custom calendar color.
```html
<van-calendar v-model="show" color="#07c160" />
<van-calendar v-model:show="show" color="#07c160" />
```
### Custom Date Range
@@ -119,7 +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="show" :min-date="minDate" :max-date="maxDate" />
```
```js
@@ -140,7 +140,7 @@ Use `confirm-text` and `confirm-disabled-text` to custom confirm text.
```html
<van-calendar
v-model="show"
v-model:show="show"
type="range"
confirm-text="OK"
confirm-disabled-text="Select End Time"
@@ -152,7 +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="show" type="range" :formatter="formatter" />
```
```js
@@ -189,7 +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="show" :round="false" position="right" />
```
### Max Range
@@ -251,7 +251,7 @@ Following props are supported when the poppable is true
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Whether to show calendar | _boolean_ | `false` |
| v-model:show | 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_ | `true` |