mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'dev' into next
This commit is contained in:
chenjiahan
commit
b74645a390
@ -10,6 +10,21 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
|
||||
- Minor version：released every one to two months, including backwards compatible features.
|
||||
- Major version：including breaking changes and new features.
|
||||
|
||||
### [v2.9.2](https://github.com/youzan/vant/compare/v2.9.1...v2.9.2)
|
||||
|
||||
`2020-07-14`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Calendar: add first-day-of-week prop [#6468](https://github.com/youzan/vant/issues/6468)
|
||||
- DatetimePicker: add columns-order prop [#6672](https://github.com/youzan/vant/issues/6672) [#6768](https://github.com/youzan/vant/issues/6768)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Tab: should not trigger route when disabled [#6782](https://github.com/youzan/vant/issues/6782)
|
||||
- Sku: fix label color [#6771](https://github.com/youzan/vant/issues/6771)
|
||||
- Sku: image cell word wrap [#6777](https://github.com/youzan/vant/issues/6777)
|
||||
|
||||
### [v2.9.1](https://github.com/youzan/vant/compare/v2.9.0...v2.9.1)
|
||||
|
||||
`2020-07-12`
|
||||
|
||||
@ -10,6 +10,21 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
|
||||
- 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。
|
||||
|
||||
### [v2.9.2](https://github.com/youzan/vant/compare/v2.9.1...v2.9.2)
|
||||
|
||||
`2020-07-14`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Calendar: 新增 first-day-of-week 属性 [#6468](https://github.com/youzan/vant/issues/6468)
|
||||
- DatetimePicker: 新增 columns-order 属性 [#6672](https://github.com/youzan/vant/issues/6672) [#6768](https://github.com/youzan/vant/issues/6768)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Tab: 修复标签禁用时仍会触发路由跳转的问题 [#6782](https://github.com/youzan/vant/issues/6782)
|
||||
- Sku: 修复留言区域 label 颜色不一致的问题 [#6771](https://github.com/youzan/vant/issues/6771)
|
||||
- Sku: 修复留言区域 label 里包含较长的单词时未自动换行的问题 [#6777](https://github.com/youzan/vant/issues/6777)
|
||||
|
||||
### [v2.9.1](https://github.com/youzan/vant/compare/v2.9.0...v2.9.1)
|
||||
|
||||
`2020-07-12`
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant",
|
||||
"version": "2.9.1",
|
||||
"version": "2.9.2",
|
||||
"description": "Mobile UI Components built on Vue",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### Intro
|
||||
|
||||
Calendar component for selecting dates or date ranges
|
||||
Calendar component for selecting dates or date ranges.
|
||||
|
||||
### Install
|
||||
|
||||
@ -17,7 +17,7 @@ Vue.use(Calendar);
|
||||
|
||||
### Select Single Date
|
||||
|
||||
The `confirm` event will be triggered after the date selection is completed
|
||||
The `confirm` event will be triggered after the date selection is completed.
|
||||
|
||||
```html
|
||||
<van-cell title="Select Single Date" :value="date" @click="show = true" />
|
||||
@ -108,7 +108,7 @@ Set `show-confirm` to `false` to hide the confirm button. In this case, the `con
|
||||
|
||||
### Custom Color
|
||||
|
||||
Use `color` prop to custom calendar color
|
||||
Use `color` prop to custom calendar color.
|
||||
|
||||
```html
|
||||
<van-calendar v-model="show" color="#07c160" />
|
||||
@ -116,7 +116,7 @@ Use `color` prop to custom calendar color
|
||||
|
||||
### Custom Date Range
|
||||
|
||||
Use `min-date` and `max-date` to custom date range
|
||||
Use `min-date` and `max-date` to custom date range.
|
||||
|
||||
```html
|
||||
<van-calendar v-model="show" :min-date="minDate" :max-date="maxDate" />
|
||||
@ -136,7 +136,7 @@ export default {
|
||||
|
||||
### Custom Confirm Text
|
||||
|
||||
Use `confirm-text` and `confirm-disabled-text` to custom confirm text
|
||||
Use `confirm-text` and `confirm-disabled-text` to custom confirm text.
|
||||
|
||||
```html
|
||||
<van-calendar
|
||||
@ -149,7 +149,7 @@ Use `confirm-text` and `confirm-disabled-text` to custom confirm text
|
||||
|
||||
### Custom Day Text
|
||||
|
||||
Use `formatter` to custom day text
|
||||
Use `formatter` to custom day text.
|
||||
|
||||
```html
|
||||
<van-calendar v-model="show" type="range" :formatter="formatter" />
|
||||
@ -186,7 +186,7 @@ export default {
|
||||
|
||||
### Custom Position
|
||||
|
||||
Use `position` to custom popup position，can be set to `top`、`left`、`right`
|
||||
Use `position` to custom popup position，can be set to `top`、`left`、`right`.
|
||||
|
||||
```html
|
||||
<van-calendar v-model="show" :round="false" position="right" />
|
||||
@ -194,12 +194,20 @@ Use `position` to custom popup position，can be set to `top`、`left`、`right`
|
||||
|
||||
### Max Range
|
||||
|
||||
When selecting a date range, you can use the `max-range` prop to specify the maximum number of selectable days
|
||||
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' }" />
|
||||
```
|
||||
|
||||
### Custom First Day Of Week
|
||||
|
||||
Use `first-day-of-week` to custom the start day of week
|
||||
|
||||
```html
|
||||
<van-calendar first-day-of-week="1" />
|
||||
```
|
||||
|
||||
### Tiled display
|
||||
|
||||
Set `poppable` to `false`, the calendar will be displayed directly on the page instead of appearing as a popup
|
||||
@ -235,6 +243,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
|
||||
| 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` |
|
||||
| first-day-of-week `v2.9.2` | Set the start day of week | _0-6_ | `0` |
|
||||
|
||||
### Poppable Props
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
日历组件用于选择日期或日期区间，2.4 版本开始支持此组件
|
||||
日历组件用于选择日期或日期区间，2.4 版本开始支持此组件。
|
||||
|
||||
### 引入
|
||||
|
||||
@ -17,7 +17,7 @@ Vue.use(Calendar);
|
||||
|
||||
### 选择单个日期
|
||||
|
||||
下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发`confirm`事件
|
||||
下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发 `confirm` 事件。
|
||||
|
||||
```html
|
||||
<van-cell title="选择单个日期" :value="date" @click="show = true" />
|
||||
@ -46,7 +46,7 @@ export default {
|
||||
|
||||
### 选择多个日期
|
||||
|
||||
设置`type`为`multiple`后可以选择多个日期，此时`confirm`事件返回的 date 为数组结构，数组包含若干个选中的日期。
|
||||
设置 `type` 为 `multiple` 后可以选择多个日期，此时 `confirm` 事件返回的 date 为数组结构，数组包含若干个选中的日期。
|
||||
|
||||
```html
|
||||
<van-cell title="选择多个日期" :value="text" @click="show = true" />
|
||||
@ -72,7 +72,7 @@ export default {
|
||||
|
||||
### 选择日期区间
|
||||
|
||||
设置`type`为`range`后可以选择日期区间，此时`confirm`事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。
|
||||
设置 `type` 为 `range` 后可以选择日期区间，此时 `confirm` 事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。
|
||||
|
||||
```html
|
||||
<van-cell title="选择日期区间" :value="date" @click="show = true" />
|
||||
@ -102,7 +102,7 @@ export default {
|
||||
|
||||
### 快捷选择
|
||||
|
||||
将`show-confirm`设置为`false`可以隐藏确认按钮，这种情况下选择完成后会立即触发`confirm`事件
|
||||
将 `show-confirm` 设置为 `false` 可以隐藏确认按钮，这种情况下选择完成后会立即触发 `confirm` 事件。
|
||||
|
||||
```html
|
||||
<van-calendar v-model="show" :show-confirm="false" />
|
||||
@ -110,7 +110,7 @@ export default {
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`color`属性可以自定义日历的颜色，对选中日期和底部按钮生效
|
||||
通过 `color` 属性可以自定义日历的颜色，对选中日期和底部按钮生效。
|
||||
|
||||
```html
|
||||
<van-calendar v-model="show" color="#07c160" />
|
||||
@ -118,7 +118,7 @@ export default {
|
||||
|
||||
### 自定义日期范围
|
||||
|
||||
通过`min-date`和`max-date`定义日历的范围
|
||||
通过 `min-date` 和 `max-date` 定义日历的范围。
|
||||
|
||||
```html
|
||||
<van-calendar v-model="show" :min-date="minDate" :max-date="maxDate" />
|
||||
@ -138,7 +138,7 @@ export default {
|
||||
|
||||
### 自定义按钮文字
|
||||
|
||||
通过`confirm-text`设置按钮文字，通过`confirm-disabled-text`设置按钮禁用时的文字
|
||||
通过 `confirm-text` 设置按钮文字，通过 `confirm-disabled-text` 设置按钮禁用时的文字。
|
||||
|
||||
```html
|
||||
<van-calendar
|
||||
@ -151,7 +151,7 @@ export default {
|
||||
|
||||
### 自定义日期文案
|
||||
|
||||
通过传入`formatter`函数来对日历上每一格的内容进行格式化
|
||||
通过传入 `formatter` 函数来对日历上每一格的内容进行格式化。
|
||||
|
||||
```html
|
||||
<van-calendar v-model="show" type="range" :formatter="formatter" />
|
||||
@ -188,7 +188,7 @@ export default {
|
||||
|
||||
### 自定义弹出位置
|
||||
|
||||
通过`position`属性自定义弹出层的弹出位置，可选值为`top`、`left`、`right`
|
||||
通过 `position` 属性自定义弹出层的弹出位置，可选值为 `top`、`left`、`right`。
|
||||
|
||||
```html
|
||||
<van-calendar v-model="show" :round="false" position="right" />
|
||||
@ -196,15 +196,23 @@ export default {
|
||||
|
||||
### 日期区间最大范围
|
||||
|
||||
选择日期区间时，可以通过`max-range`属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案
|
||||
选择日期区间时，可以通过 `max-range` 属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案。
|
||||
|
||||
```html
|
||||
<van-calendar type="range" :max-range="3" :style="{ height: '500px' }" />
|
||||
```
|
||||
|
||||
### 自定义周起始日
|
||||
|
||||
通过 `first-day-of-week` 属性设置一周从哪天开始。
|
||||
|
||||
```html
|
||||
<van-calendar first-day-of-week="1" />
|
||||
```
|
||||
|
||||
### 平铺展示
|
||||
|
||||
将`poppable`设置为`false`，日历会直接展示在页面内，而不是以弹层的形式出现
|
||||
将 `poppable` 设置为 `false`，日历会直接展示在页面内，而不是以弹层的形式出现。
|
||||
|
||||
```html
|
||||
<van-calendar
|
||||
@ -237,6 +245,7 @@ export default {
|
||||
| show-confirm | 是否展示确认按钮 | _boolean_ | `true` |
|
||||
| confirm-text | 确认按钮的文字 | _string_ | `确定` |
|
||||
| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` |
|
||||
| first-day-of-week `v2.9.2` | 设置周起始日 | _0-6_ | `0` |
|
||||
|
||||
### Poppable Props
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@ export default createComponent({
|
||||
subtitle: String,
|
||||
showTitle: Boolean,
|
||||
showSubtitle: Boolean,
|
||||
firstDayOfWeek: Number,
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -28,9 +29,16 @@ export default createComponent({
|
||||
genWeekDays() {
|
||||
const weekdays = t('weekdays');
|
||||
|
||||
const { firstDayOfWeek } = this;
|
||||
|
||||
const renderWeekDays = [
|
||||
...weekdays.slice(firstDayOfWeek, 7),
|
||||
...weekdays.slice(0, firstDayOfWeek),
|
||||
];
|
||||
|
||||
return (
|
||||
<div class={bem('weekdays')}>
|
||||
{weekdays.map((item) => (
|
||||
{renderWeekDays.map((item) => (
|
||||
<span class={bem('weekday')}>{item}</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -27,6 +27,7 @@ export default createComponent({
|
||||
allowSameDay: Boolean,
|
||||
showSubtitle: Boolean,
|
||||
showMonthTitle: Boolean,
|
||||
firstDayOfWeek: Number,
|
||||
},
|
||||
|
||||
data() {
|
||||
@ -41,7 +42,15 @@ export default createComponent({
|
||||
},
|
||||
|
||||
offset() {
|
||||
return this.date.getDay();
|
||||
const { firstDayOfWeek } = this;
|
||||
|
||||
const realDay = this.date.getDay();
|
||||
|
||||
if (!firstDayOfWeek) {
|
||||
return realDay;
|
||||
}
|
||||
|
||||
return (realDay + 7 - this.firstDayOfWeek) % 7;
|
||||
},
|
||||
|
||||
totalDay() {
|
||||
|
||||
@ -81,6 +81,12 @@
|
||||
:value="formatRange(date.maxRange)"
|
||||
@click="show('range', 'maxRange')"
|
||||
/>
|
||||
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('firstDayOfWeek')"
|
||||
@click="show('single', 'firstDayOfWeek')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('tiledDisplay')">
|
||||
@ -108,6 +114,7 @@
|
||||
:show-confirm="showConfirm"
|
||||
:confirm-text="confirmText"
|
||||
:confirm-disabled-text="confirmDisabledText"
|
||||
:first-day-of-week="firstDayOfWeek"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</demo-section>
|
||||
@ -139,6 +146,7 @@ export default {
|
||||
customPosition: '自定义弹出位置',
|
||||
customCalendar: '自定义日历',
|
||||
confirmDisabledText: '请选择结束时间',
|
||||
firstDayOfWeek: '自定义周起始日',
|
||||
tiledDisplay: '平铺展示',
|
||||
},
|
||||
'en-US': {
|
||||
@ -161,6 +169,7 @@ export default {
|
||||
customDayText: 'Custom Day Text',
|
||||
customPosition: 'Custom Position',
|
||||
customCalendar: 'Custom Calendar',
|
||||
firstDayOfWeek: 'Custom First Day Of Week',
|
||||
confirmDisabledText: 'Select End Time',
|
||||
tiledDisplay: 'Tiled display',
|
||||
},
|
||||
@ -195,6 +204,7 @@ export default {
|
||||
tiledMaxDate: new Date(2012, 2, 20),
|
||||
confirmText: undefined,
|
||||
confirmDisabledText: undefined,
|
||||
firstDayOfWeek: 0,
|
||||
};
|
||||
},
|
||||
|
||||
@ -210,6 +220,7 @@ export default {
|
||||
this.showConfirm = true;
|
||||
this.confirmText = undefined;
|
||||
this.confirmDisabledText = undefined;
|
||||
this.firstDayOfWeek = 0;
|
||||
},
|
||||
|
||||
show(type, id) {
|
||||
@ -246,6 +257,9 @@ export default {
|
||||
case 'maxRange':
|
||||
this.maxRange = 3;
|
||||
break;
|
||||
case 'firstDayOfWeek':
|
||||
this.firstDayOfWeek = 1;
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -35,6 +35,13 @@ export default createComponent({
|
||||
allowSameDay: Boolean,
|
||||
closeOnPopstate: Boolean,
|
||||
confirmDisabledText: String,
|
||||
firstDayOfWeek: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
validator: (val) => {
|
||||
return val >= 0 && val <= 6;
|
||||
},
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'single',
|
||||
@ -137,6 +144,10 @@ export default createComponent({
|
||||
|
||||
return !currentDate;
|
||||
},
|
||||
|
||||
dayOffset() {
|
||||
return this.firstDayOfWeek ? this.firstDayOfWeek % 7 : 0;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
@ -379,6 +390,7 @@ export default createComponent({
|
||||
showSubtitle={this.showSubtitle}
|
||||
allowSameDay={this.allowSameDay}
|
||||
showMonthTitle={showMonthTitle}
|
||||
firstDayOfWeek={this.dayOffset}
|
||||
onClick={this.onClickDay}
|
||||
/>
|
||||
);
|
||||
@ -432,6 +444,7 @@ export default createComponent({
|
||||
scopedSlots={{
|
||||
title: () => this.slots('title'),
|
||||
}}
|
||||
firstDayOfWeek={this.dayOffset}
|
||||
/>
|
||||
<div ref="body" class={bem('body')} onScroll={this.onScroll}>
|
||||
{this.months.map(this.genMonth)}
|
||||
|
||||
@ -51,6 +51,10 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell__title"><span>日期区间最大范围</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>自定义周起始日</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-calendar" style="height: 500px;">
|
||||
|
||||
@ -191,3 +191,24 @@ test('month-show event', async () => {
|
||||
|
||||
expect(wrapper.emitted('month-show')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('first day of week', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
poppable: false,
|
||||
defaultDate: new Date(2020, 7, 1),
|
||||
maxDate: new Date(2020, 7, 30),
|
||||
firstDayOfWeek: 2,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(wrapper.find('.van-calendar__weekdays').text()[0]).toEqual('二');
|
||||
|
||||
const day = wrapper.find(
|
||||
'.van-calendar__month:first-of-type .van-calendar__day'
|
||||
);
|
||||
expect(day.text()).toEqual('1');
|
||||
expect(day.attributes('style')).toContain(`margin-left: ${100 / 7}%`);
|
||||
});
|
||||
|
||||
@ -95,7 +95,7 @@ Vue.use(CellGroup);
|
||||
<van-cell title="单元格" icon="shop-o">
|
||||
<!-- Use the right-icon slot to customize the right icon -->
|
||||
<template #right-icon>
|
||||
<van-icon name="search" style="line-height: inherit;" />
|
||||
<van-icon name="search" style="font-size: 16px; line-height: inherit;" />
|
||||
</template>
|
||||
</van-cell>
|
||||
```
|
||||
|
||||
@ -96,7 +96,7 @@ Vue.use(CellGroup);
|
||||
<van-cell title="单元格" icon="shop-o">
|
||||
<!-- 使用 right-icon 插槽来自定义右侧图标 -->
|
||||
<template #right-icon>
|
||||
<van-icon name="search" style="line-height: inherit;" />
|
||||
<van-icon name="search" style="font-size: 16px; line-height: inherit;" />
|
||||
</template>
|
||||
</van-cell>
|
||||
```
|
||||
|
||||
@ -60,7 +60,10 @@
|
||||
|
||||
<van-cell icon="shop-o" :title="t('cell')">
|
||||
<template #right-icon>
|
||||
<van-icon name="search" style="line-height: inherit;" />
|
||||
<van-icon
|
||||
name="search"
|
||||
style="font-size: 16px; line-height: inherit;"
|
||||
/>
|
||||
</template>
|
||||
</van-cell>
|
||||
</demo-block>
|
||||
|
||||
@ -94,7 +94,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-cell"><i class="van-icon van-icon-shop-o van-cell__left-icon">
|
||||
<!----></i>
|
||||
<div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-search" style="line-height: inherit;">
|
||||
<div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-search" style="font-size: 16px; line-height: inherit;">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -83,20 +83,28 @@ export default createComponent({
|
||||
},
|
||||
];
|
||||
|
||||
if (this.type === 'date') {
|
||||
result = result.slice(0, 3);
|
||||
switch (this.type) {
|
||||
case 'date':
|
||||
result = result.slice(0, 3);
|
||||
break;
|
||||
case 'year-month':
|
||||
result = result.slice(0, 2);
|
||||
break;
|
||||
case 'month-day':
|
||||
result = result.slice(1, 3);
|
||||
break;
|
||||
case 'datehour':
|
||||
result = result.slice(0, 4);
|
||||
break;
|
||||
}
|
||||
|
||||
if (this.type === 'year-month') {
|
||||
result = result.slice(0, 2);
|
||||
}
|
||||
|
||||
if (this.type === 'month-day') {
|
||||
result = result.slice(1, 3);
|
||||
}
|
||||
|
||||
if (this.type === 'datehour') {
|
||||
result = result.slice(0, 4);
|
||||
if (this.columnsOrder) {
|
||||
const columnsOrder = this.columnsOrder.concat(
|
||||
result.map((column) => column.type)
|
||||
);
|
||||
result.sort(
|
||||
(a, b) => columnsOrder.indexOf(a.type) - columnsOrder.indexOf(b.type)
|
||||
);
|
||||
}
|
||||
|
||||
return result;
|
||||
@ -155,7 +163,13 @@ export default createComponent({
|
||||
updateInnerValue() {
|
||||
const { type } = this;
|
||||
const indexes = this.getPicker().getIndexes();
|
||||
const getValue = (index) => {
|
||||
const getValue = (type) => {
|
||||
let index = 0;
|
||||
this.originColumns.forEach((column, columnIndex) => {
|
||||
if (type === column.type) {
|
||||
index = columnIndex;
|
||||
}
|
||||
});
|
||||
const { values } = this.originColumns[index];
|
||||
return getTrueValue(values[indexes[index]]);
|
||||
};
|
||||
@ -163,15 +177,14 @@ export default createComponent({
|
||||
let year;
|
||||
let month;
|
||||
let day;
|
||||
|
||||
if (type === 'month-day') {
|
||||
year = this.innerValue.getFullYear();
|
||||
month = getValue(0);
|
||||
day = getValue(1);
|
||||
month = getValue('month');
|
||||
day = getValue('day');
|
||||
} else {
|
||||
year = getValue(0);
|
||||
month = getValue(1);
|
||||
day = type === 'year-month' ? 1 : getValue(2);
|
||||
year = getValue('year');
|
||||
month = getValue('month');
|
||||
day = type === 'year-month' ? 1 : getValue('day');
|
||||
}
|
||||
|
||||
const maxDay = getMonthEndDay(year, month);
|
||||
@ -181,12 +194,12 @@ export default createComponent({
|
||||
let minute = 0;
|
||||
|
||||
if (type === 'datehour') {
|
||||
hour = getValue(3);
|
||||
hour = getValue('hour');
|
||||
}
|
||||
|
||||
if (type === 'datetime') {
|
||||
hour = getValue(3);
|
||||
minute = getValue(4);
|
||||
hour = getValue('hour');
|
||||
minute = getValue('minute');
|
||||
}
|
||||
|
||||
const value = new Date(year, month - 1, day, hour, minute);
|
||||
@ -208,32 +221,23 @@ export default createComponent({
|
||||
const value = this.innerValue;
|
||||
const { formatter } = this;
|
||||
|
||||
let values = [
|
||||
formatter('year', `${value.getFullYear()}`),
|
||||
formatter('month', padZero(value.getMonth() + 1)),
|
||||
formatter('day', padZero(value.getDate())),
|
||||
];
|
||||
|
||||
if (this.type === 'datetime') {
|
||||
values.push(
|
||||
formatter('hour', padZero(value.getHours())),
|
||||
formatter('minute', padZero(value.getMinutes()))
|
||||
);
|
||||
}
|
||||
|
||||
if (this.type === 'datehour') {
|
||||
values.push(
|
||||
formatter('hour', padZero(value.getHours()))
|
||||
);
|
||||
}
|
||||
|
||||
if (this.type === 'year-month') {
|
||||
values = values.slice(0, 2);
|
||||
}
|
||||
|
||||
if (this.type === 'month-day') {
|
||||
values = values.slice(1, 3);
|
||||
}
|
||||
const values = this.originColumns.map((column) => {
|
||||
switch (column.type) {
|
||||
case 'year':
|
||||
return formatter('year', `${value.getFullYear()}`);
|
||||
case 'month':
|
||||
return formatter('month', padZero(value.getMonth() + 1));
|
||||
case 'day':
|
||||
return formatter('day', padZero(value.getDate()));
|
||||
case 'hour':
|
||||
return formatter('hour', padZero(value.getHours()));
|
||||
case 'minute':
|
||||
return formatter('minute', padZero(value.getMinutes()));
|
||||
default:
|
||||
// no default
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getPicker().setValues(values);
|
||||
|
||||
@ -208,6 +208,42 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Columns Order
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="date"
|
||||
title="自定义列排序"
|
||||
:columns-order="['month', 'day', 'year']"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatter(type, val) {
|
||||
if (type === 'year') {
|
||||
return val + ' Year';
|
||||
}
|
||||
if (type === 'month') {
|
||||
return val + ' Month';
|
||||
}
|
||||
if (type === 'day') {
|
||||
return val + ' Day';
|
||||
}
|
||||
return val;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -222,6 +258,7 @@ export default {
|
||||
| loading | Whether to show loading prompt | _boolean_ | `false` |
|
||||
| filter | Option filter | _(type, vals) => vals_ | - |
|
||||
| formatter | Option text formatter | _(type, val) => val_ | - |
|
||||
| columns-order `v2.9.2` | Array for ordering columns, where item can be set to<br> `year`, `month`, `day`, `hour` and `minute` | _string[]_ | - |
|
||||
| item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
|
||||
|
||||
@ -217,6 +217,42 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 自定义列排序
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="date"
|
||||
title="自定义列排序"
|
||||
:columns-order="['month', 'day', 'year']"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatter(type, val) {
|
||||
if (type === 'year') {
|
||||
return val + '年';
|
||||
}
|
||||
if (type === 'month') {
|
||||
return val + '月';
|
||||
}
|
||||
if (type === 'day') {
|
||||
return val + '日';
|
||||
}
|
||||
return val;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -231,6 +267,7 @@ export default {
|
||||
| loading | 是否显示加载状态 | _boolean_ | `false` |
|
||||
| filter | 选项过滤函数 | _(type, vals) => vals_ | - |
|
||||
| formatter | 选项格式化函数 | _(type, val) => val_ | - |
|
||||
| columns-order `v2.9.2` | 自定义列排序数组, 子项可选值为<br> `year`、`month`、`day`、`hour`、`minute` | _string[]_ | - |
|
||||
| item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card v-if="!isWeapp" :title="t('monthDayType')">
|
||||
<demo-block v-if="!isWeapp" card :title="t('monthDayType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.monthDayType"
|
||||
type="month-day"
|
||||
@ -52,7 +52,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card v-if="!isWeapp" :title="t('datehourType')">
|
||||
<demo-block v-if="!isWeapp" card :title="t('datehourType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.datehour"
|
||||
type="datehour"
|
||||
@ -70,6 +70,18 @@
|
||||
:filter="filter"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" card :title="t('sortColumns')">
|
||||
<van-datetime-picker
|
||||
v-model="value.sortColumnsDate"
|
||||
type="date"
|
||||
:title="t('sortColumns')"
|
||||
:columns-order="['month', 'day', 'year']"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -87,9 +99,10 @@ export default {
|
||||
monthDayType: '选择月日',
|
||||
yearMonthType: '选择年月',
|
||||
optionFilter: '选项过滤器',
|
||||
sortColumns: '自定义列排序',
|
||||
},
|
||||
'en-US': {
|
||||
day: 'Day',
|
||||
day: ' Day',
|
||||
year: ' Year',
|
||||
month: ' Month',
|
||||
timeType: 'Choose Time',
|
||||
@ -99,6 +112,7 @@ export default {
|
||||
monthDayType: 'Choose Month-Day',
|
||||
yearMonthType: 'Choose Year-Month',
|
||||
optionFilter: 'Option Filter',
|
||||
sortColumns: 'Columns Order',
|
||||
},
|
||||
},
|
||||
|
||||
@ -114,6 +128,7 @@ export default {
|
||||
monthDay: new Date(2020, 0, 1),
|
||||
yearMonth: new Date(2020, 0, 1),
|
||||
optionFilter: '12:00',
|
||||
sortColumnsDate: new Date(2020, 0, 1),
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
@ -15,6 +15,7 @@ export const sharedProps = {
|
||||
type: Function,
|
||||
default: (type, value) => value,
|
||||
},
|
||||
columnsOrder: Array,
|
||||
};
|
||||
|
||||
export const TimePickerMixin = {
|
||||
|
||||
@ -1442,5 +1442,177 @@ exports[`renders demo correctly 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">自定义列排序</div><button type="button" class="van-picker__confirm">确认</button>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">01月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">02月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">03月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">04月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">06月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">07月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">08月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">09月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">11月</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">12月</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">01日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">02日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">03日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">04日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">06日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">07日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">08日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">09日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">11日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">12日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">13日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">14日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">16日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">17日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">18日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">19日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">21日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">22日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">23日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">24日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">26日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">27日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">28日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">29日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30日</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">31日</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">2020年</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">2021年</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">2022年</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">2023年</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">2024年</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">2025年</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -318,6 +318,9 @@
|
||||
.van-cell__title {
|
||||
max-width: @field-label-width;
|
||||
margin-right: @field-label-margin-right;
|
||||
color: @field-label-color;
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.van-cell__value {
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
height: 100%;
|
||||
background-color: @slider-active-background-color;
|
||||
border-radius: inherit;
|
||||
transition: width @animation-duration-fast;
|
||||
transition: width @animation-duration-fast, height @animation-duration-fast;
|
||||
}
|
||||
|
||||
&__button {
|
||||
|
||||
@ -267,7 +267,7 @@ export default createComponent({
|
||||
},
|
||||
|
||||
// emit event when clicked
|
||||
onClick(index) {
|
||||
onClick(item, index) {
|
||||
const { title, disabled, computedName } = this.children[index];
|
||||
if (disabled) {
|
||||
this.$emit('disabled', computedName, title);
|
||||
@ -275,6 +275,7 @@ export default createComponent({
|
||||
this.setCurrentIndex(index);
|
||||
this.scrollToCurrentContent();
|
||||
this.$emit('click', computedName, title);
|
||||
route(item.$router, item);
|
||||
}
|
||||
},
|
||||
|
||||
@ -360,8 +361,7 @@ export default createComponent({
|
||||
default: () => item.slots('title'),
|
||||
}}
|
||||
onClick={() => {
|
||||
this.onClick(index);
|
||||
route(item.$router, item);
|
||||
this.onClick(item, index);
|
||||
}}
|
||||
/>
|
||||
));
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user