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.zh-CN.md
+10 -10
View File
@@ -21,7 +21,7 @@ Vue.use(Calendar);
```html
<van-cell title="选择单个日期" :value="date" @click="show = true" />
<van-calendar v-model="show" @confirm="onConfirm" />
<van-calendar v-model:show="show" @confirm="onConfirm" />
```
```js
@@ -50,7 +50,7 @@ export default {
```html
<van-cell title="选择多个日期" :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
@@ -76,7 +76,7 @@ export default {
```html
<van-cell title="选择日期区间" :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
@@ -105,7 +105,7 @@ export default {
将 `show-confirm` 设置为 `false` 可以隐藏确认按钮，这种情况下选择完成后会立即触发 `confirm` 事件。
```html
<van-calendar v-model="show" :show-confirm="false" />
<van-calendar v-model:show="show" :show-confirm="false" />
```
### 自定义颜色
@@ -113,7 +113,7 @@ export default {
通过 `color` 属性可以自定义日历的颜色，对选中日期和底部按钮生效。
```html
<van-calendar v-model="show" color="#07c160" />
<van-calendar v-model:show="show" color="#07c160" />
```
### 自定义日期范围
@@ -121,7 +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="show" :min-date="minDate" :max-date="maxDate" />
```
```js
@@ -142,7 +142,7 @@ export default {
```html
<van-calendar
v-model="show"
v-model:show="show"
type="range"
confirm-text="完成"
confirm-disabled-text="请选择结束时间"
@@ -154,7 +154,7 @@ export default {
通过传入 `formatter` 函数来对日历上每一格的内容进行格式化。
```html
<van-calendar v-model="show" type="range" :formatter="formatter" />
<van-calendar v-model:show="show" type="range" :formatter="formatter" />
```
```js
@@ -191,7 +191,7 @@ export default {
通过 `position` 属性自定义弹出层的弹出位置，可选值为 `top`、`left`、`right`。
```html
<van-calendar v-model="show" :round="false" position="right" />
<van-calendar v-model:show="show" :round="false" position="right" />
```
### 日期区间最大范围
@@ -253,7 +253,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 是否显示日历弹窗 | _boolean_ | `false` |
| v-model:show | 是否显示日历弹窗 | _boolean_ | `false` |
| position | 弹出位置，可选值为 `top` `right` `left` | _string_ | `bottom` |
| round | 是否显示圆角弹窗 | _boolean_ | `true` |
| close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | _boolean_ | `true` |