Merge branch 'dev' into next

docs/markdown/changelog.en-US.md

@@ -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`

docs/markdown/changelog.zh-CN.md

@@ -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`

package.json

@@ -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",

src/calendar/README.md

@@ -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
 

src/calendar/README.zh-CN.md

@@ -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" />
@@ -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
 

src/calendar/components/Header.js

@@ -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>

src/calendar/components/Month.js

@@ -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() {

src/calendar/demo/index.vue

@@ -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;
       }
     },
 

src/calendar/index.js

@@ -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)}

src/calendar/test/__snapshots__/demo.spec.js.snap

@@ -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;">

src/calendar/test/prop.spec.js

@@ -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}%`);
+});

src/cell/README.md

@@ -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>
 ```

src/cell/README.zh-CN.md

@@ -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>
 ```

src/cell/demo/index.vue

@@ -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>

src/cell/test/__snapshots__/demo.spec.js.snap

@@ -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>

src/datetime-picker/DatePicker.js

@@ -83,20 +83,28 @@ export default createComponent({
         },
       ];
 
-      if (this.type === 'date') {
+      switch (this.type) {
+        case 'date':
           result = result.slice(0, 3);
-      }
+          break;
-
+        case 'year-month':
-      if (this.type === 'year-month') {
           result = result.slice(0, 2);
-      }
+          break;
-
+        case 'month-day':
-      if (this.type === 'month-day') {
           result = result.slice(1, 3);
+          break;
+        case 'datehour':
+          result = result.slice(0, 4);
+          break;
       }
 
-      if (this.type === 'datehour') {
+      if (this.columnsOrder) {
-        result = result.slice(0, 4);
+        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);
+        month = getValue('month');
-        day = getValue(1);
+        day = getValue('day');
       } else {
-        year = getValue(0);
+        year = getValue('year');
-        month = getValue(1);
+        month = getValue('month');
-        day = type === 'year-month' ? 1 : getValue(2);
+        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);
+        hour = getValue('hour');
-        minute = getValue(4);
+        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 = [
+      const values = this.originColumns.map((column) => {
-        formatter('year', `${value.getFullYear()}`),
+        switch (column.type) {
-        formatter('month', padZero(value.getMonth() + 1)),
+          case 'year':
-        formatter('day', padZero(value.getDate())),
+            return formatter('year', `${value.getFullYear()}`);
-      ];
+          case 'month':
-
+            return formatter('month', padZero(value.getMonth() + 1));
-      if (this.type === 'datetime') {
+          case 'day':
-        values.push(
+            return formatter('day', padZero(value.getDate()));
-          formatter('hour', padZero(value.getHours())),
+          case 'hour':
-          formatter('minute', padZero(value.getMinutes()))
+            return formatter('hour', padZero(value.getHours()));
-        );
+          case 'minute':
-      }
+            return formatter('minute', padZero(value.getMinutes()));
-
+          default:
-      if (this.type === 'datehour') {
+            // no default
-        values.push(
+            return null;
-          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);
         }
+      });
 
       this.$nextTick(() => {
         this.getPicker().setValues(values);

src/datetime-picker/README.md

@@ -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` |

src/datetime-picker/README.zh-CN.md

@@ -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` |

src/datetime-picker/demo/index.vue

@@ -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,6 +99,7 @@ export default {
       monthDayType: '选择月日',
       yearMonthType: '选择年月',
       optionFilter: '选项过滤器',
+      sortColumns: '自定义列排序',
     },
     'en-US': {
       day: ' Day',
@@ -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),
       },
     };
   },

src/datetime-picker/shared.js

@@ -15,6 +15,7 @@ export const sharedProps = {
     type: Function,
     default: (type, value) => value,
   },
+  columnsOrder: Array,
 };
 
 export const TimePickerMixin = {

src/datetime-picker/test/__snapshots__/demo.spec.js.snap

@@ -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>
 `;

src/sku/index.less

@@ -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 {

src/slider/index.less

@@ -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 {

src/tabs/index.js

@@ -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);
+          this.onClick(item, index);
-          route(item.$router, item);
         }}
       />
     ));