From 3344e31a92a44fc81ad76807db35aa28b898dd0a Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 2 Jan 2021 16:31:24 +0800 Subject: [PATCH 1/5] types(IndexBar): add scrollTo method (#7845) --- src/index-bar/README.md | 8 ++++++++ src/index-bar/README.zh-CN.md | 8 ++++++++ src/index-bar/index.js | 12 ++++++------ types/index-bar.d.ts | 5 +++++ types/index.d.ts | 3 ++- 5 files changed, 29 insertions(+), 7 deletions(-) create mode 100644 types/index-bar.d.ts diff --git a/src/index-bar/README.md b/src/index-bar/README.md index 2f61f4114..b222a7988 100644 --- a/src/index-bar/README.md +++ b/src/index-bar/README.md @@ -89,6 +89,14 @@ export default { | ------- | ------------------------------------- | | default | Anchor content, show index by default | +### IndexBar Methods + +Use [ref](https://vuejs.org/v2/api/#ref) to get IndexBar instance and call instance methods. + +| Name | Description | Attribute | Return value | +| --- | --- | --- | --- | +| scrollTo `v2.12.2` | scroll to target element | _index: number \| string_ | - | + ### Less Variables How to use: [Custom Theme](#/en-US/theme). diff --git a/src/index-bar/README.zh-CN.md b/src/index-bar/README.zh-CN.md index 913738a86..a2e55d664 100644 --- a/src/index-bar/README.zh-CN.md +++ b/src/index-bar/README.zh-CN.md @@ -93,6 +93,14 @@ export default { | ------- | -------------------------------- | | default | 锚点位置显示内容，默认为索引字符 | +### IndexBar 方法 + +通过 ref 可以获取到 IndexBar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 + +| 方法名 | 说明 | 参数 | 返回值 | +| ------------------ | -------------- | ------------------------- | ------ | +| scrollTo `v2.12.2` | 滚动到指定锚点 | _index: number \| string_ | - | + ### 样式变量 组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 diff --git a/src/index-bar/index.js b/src/index-bar/index.js index 007554b50..457a3c9ee 100644 --- a/src/index-bar/index.js +++ b/src/index-bar/index.js @@ -184,12 +184,7 @@ export default createComponent({ } }, - scrollToElement(element) { - const { index } = element.dataset; - if (!index) { - return; - } - + scrollTo(index) { const match = this.children.filter( (item) => String(item.index) === index ); @@ -205,6 +200,11 @@ export default createComponent({ } }, + scrollToElement(element) { + const { index } = element.dataset; + this.scrollTo(index); + }, + onTouchEnd() { this.active = null; }, diff --git a/types/index-bar.d.ts b/types/index-bar.d.ts new file mode 100644 index 000000000..b004c9ccb --- /dev/null +++ b/types/index-bar.d.ts @@ -0,0 +1,5 @@ +import { VanComponent } from './component'; + +export class IndexBar extends VanComponent { + scrollTo(index: number | string): void; +} diff --git a/types/index.d.ts b/types/index.d.ts index 53c2eb478..c4fcdbb56 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -14,6 +14,7 @@ import { DropdownItem } from './dropdown-item'; import { Field } from './field'; import { Form } from './form'; import { ImagePreview } from './image-preview'; +import { IndexBar } from './index-bar'; import { Lazyload } from './lazyload'; import { List } from './list'; import { Locale } from './locale'; @@ -57,7 +58,6 @@ export class GoodsActionIcon extends VanComponent {} export class Icon extends VanComponent {} export class Image extends VanComponent {} export class IndexAnchor extends VanComponent {} -export class IndexBar extends VanComponent {} export class Info extends VanComponent {} export class Loading extends VanComponent {} export class NavBar extends VanComponent {} @@ -108,6 +108,7 @@ export { Form, Field, ImagePreview, + IndexBar, Lazyload, List, Locale, From 9582cd2faeae1cfc79ec6aa21797d11d9677895f Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 2 Jan 2021 16:38:38 +0800 Subject: [PATCH 2/5] feat(Loading): add text-color prop (#7846) --- src/loading/README.md | 13 +++++++++ src/loading/README.zh-CN.md | 27 ++++++++++++++----- src/loading/demo/index.vue | 11 ++++++++ src/loading/index.tsx | 5 +++- .../test/__snapshots__/demo.spec.js.snap | 8 ++++++ 5 files changed, 56 insertions(+), 8 deletions(-) diff --git a/src/loading/README.md b/src/loading/README.md index ddd5ab7fd..ae205b274 100644 --- a/src/loading/README.md +++ b/src/loading/README.md @@ -47,6 +47,18 @@ Vue.use(Loading); Loading... ``` +### Text Color + +use `color` or `text-color` to change text color. + +```html + + + + + +``` + ## API ### Props @@ -57,6 +69,7 @@ Vue.use(Loading); | type | Can be set to `spinner` | _string_ | `circular` | | size | Icon size | _number \| string_ | `30px` | | text-size | Text font size | _number \| string_ | `14px` | +| text-color `v2.12.2` | Text color | _string_ | `#c9c9c9` | | vertical | Whether to arrange icons and text content vertically | _boolean_ | `false` | ### Slots diff --git a/src/loading/README.zh-CN.md b/src/loading/README.zh-CN.md index 91a3d9971..da7296ee4 100644 --- a/src/loading/README.zh-CN.md +++ b/src/loading/README.zh-CN.md @@ -61,17 +61,30 @@ Vue.use(Loading); 加载中... ``` +### 自定义文案颜色 + +通过 `color` 或者 `text-color` 属性设置加载文案的颜色。 + +```html + + + + + +``` + ## API ### Props -| 参数 | 说明 | 类型 | 默认值 | -| --------- | ---------------------------- | ------------------ | ---------- | -| color | 颜色 | _string_ | `#c9c9c9` | -| type | 类型，可选值为 `spinner` | _string_ | `circular` | -| size | 加载图标大小，默认单位为`px` | _number \| string_ | `30px` | -| text-size | 文字大小，默认单位为`px` | _number \| string_ | `14px` | -| vertical | 是否垂直排列图标和文字内容 | _boolean_ | `false` | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| color | 颜色 | _string_ | `#c9c9c9` | +| type | 类型，可选值为 `spinner` | _string_ | `circular` | +| size | 加载图标大小，默认单位为 `px` | _number \| string_ | `30px` | +| text-size | 文字大小，默认单位为 `px` | _number \| string_ | `14px` | +| text-color `v2.12.2` | 文字颜色 | _string_ | `#c9c9c9` | +| vertical | 是否垂直排列图标和文字内容 | _boolean_ | `false` | ### Slots diff --git a/src/loading/demo/index.vue b/src/loading/demo/index.vue index 16cb624ab..cebc7db0b 100644 --- a/src/loading/demo/index.vue +++ b/src/loading/demo/index.vue @@ -26,6 +26,15 @@ {{ t('loading') }} + + + + {{ t('loading') }} + + + {{ t('loading') }} + + @@ -38,6 +47,7 @@ export default { size: '自定义大小', color: '自定义颜色', vertical: '垂直排列', + textColor: '自定义文本颜色', }, 'en-US': { type: 'Type', @@ -45,6 +55,7 @@ export default { size: 'Size', color: 'Color', vertical: 'Vertical', + textColor: 'Text Color', }, }, }; diff --git a/src/loading/index.tsx b/src/loading/index.tsx index a13371607..e084c5b1d 100644 --- a/src/loading/index.tsx +++ b/src/loading/index.tsx @@ -14,6 +14,7 @@ export type LoadingProps = { color: string; vertical?: boolean; textSize?: string | number; + textColor?: string; }; const [createComponent, bem] = createNamespace('loading'); @@ -40,8 +41,9 @@ function LoadingText( slots: DefaultSlots ) { if (slots.default) { - const style = props.textSize && { + const style = { fontSize: addUnit(props.textSize), + color: props.textColor ?? props.color, }; return ( @@ -85,6 +87,7 @@ Loading.props = { size: [Number, String], vertical: Boolean, textSize: [Number, String], + textColor: String, type: { type: String, default: 'circular', diff --git a/src/loading/test/__snapshots__/demo.spec.js.snap b/src/loading/test/__snapshots__/demo.spec.js.snap index 424aa506c..da915a83e 100644 --- a/src/loading/test/__snapshots__/demo.spec.js.snap +++ b/src/loading/test/__snapshots__/demo.spec.js.snap @@ -24,5 +24,13 @@ exports[`renders demo correctly 1`] = ` 加载中... +
+
+ 加载中... +
+
+ 加载中... +
+
`; From 5ac6996e5654a93c2eacd4714828828677e938d2 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 2 Jan 2021 17:02:10 +0800 Subject: [PATCH 3/5] feat(Calendar): add scrollToDate method (#7847) --- src/calendar/README.md | 7 ++++--- src/calendar/README.zh-CN.md | 7 ++++--- src/calendar/index.js | 23 +++++++++++++---------- types/calendar.d.ts | 2 ++ 4 files changed, 23 insertions(+), 16 deletions(-) diff --git a/src/calendar/README.md b/src/calendar/README.md index b15546804..8a8876457 100644 --- a/src/calendar/README.md +++ b/src/calendar/README.md @@ -314,9 +314,10 @@ Following props are supported when the type is multiple 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 | - | - | +| scrollToDate `v2.12.2` | Scroll to date | _date: Date_ | - | ### Less Variables diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index 8b8150f3c..f018efd85 100644 --- a/src/calendar/README.zh-CN.md +++ b/src/calendar/README.zh-CN.md @@ -320,9 +320,10 @@ export default { 通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 -| 方法名 | 说明 | 参数 | 返回值 | -| ------ | ---------------------- | ---- | ------ | -| reset | 重置选中的日期到默认值 | - | - | +| 方法名 | 说明 | 参数 | 返回值 | +| ---------------------- | ---------------------- | ------------ | ------ | +| reset | 重置选中的日期到默认值 | - | - | +| scrollToDate `v2.12.2` | 滚动到某个日期 | _date: Date_ | - | ### 样式变量 diff --git a/src/calendar/index.js b/src/calendar/index.js index f22ca018e..96ba188cd 100644 --- a/src/calendar/index.js +++ b/src/calendar/index.js @@ -192,17 +192,9 @@ export default createComponent({ }); }, - // scroll to current month - scrollIntoView() { + // @exposed-api + scrollToDate(targetDate) { raf(() => { - const { currentDate } = this; - - if (!currentDate) { - return; - } - - const targetDate = - this.type === 'single' ? currentDate : currentDate[0]; const displayed = this.value || !this.poppable; /* istanbul ignore if */ @@ -222,6 +214,17 @@ export default createComponent({ }); }, + // scroll to current month + scrollIntoView() { + const { currentDate } = this; + + if (currentDate) { + const targetDate = + this.type === 'single' ? currentDate : currentDate[0]; + this.scrollToDate(targetDate); + } + }, + getInitialDate() { const { type, minDate, maxDate, defaultDate } = this; diff --git a/types/calendar.d.ts b/types/calendar.d.ts index 264f418f8..bc815f8d0 100644 --- a/types/calendar.d.ts +++ b/types/calendar.d.ts @@ -2,4 +2,6 @@ import { VanComponent } from './component'; export class Calendar extends VanComponent { reset(): void; + + scrollToDate(date: Date): void; } From 54fc8469b6aa14f420854abfe35d3f2db0878c86 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sat, 2 Jan 2021 17:03:23 +0800 Subject: [PATCH 4/5] chore: release 2.12.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index acb54464f..76ea71a35 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vant", - "version": "2.12.1", + "version": "2.12.2", "description": "Mobile UI Components built on Vue", "main": "lib/index.js", "module": "es/index.js", From 01d1a3ec2801aa18be5dfdad7edff1598360b1af Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sat, 2 Jan 2021 17:05:59 +0800 Subject: [PATCH 5/5] docs(changelog): 2.12.2 --- docs/markdown/changelog.en-US.md | 13 +++++++++++++ docs/markdown/changelog.zh-CN.md | 13 +++++++++++++ 2 files changed, 26 insertions(+) diff --git a/docs/markdown/changelog.en-US.md b/docs/markdown/changelog.en-US.md index 96ae5bd17..172e83913 100644 --- a/docs/markdown/changelog.en-US.md +++ b/docs/markdown/changelog.en-US.md @@ -16,6 +16,19 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/). ## Details +### [v2.12.2](https://github.com/youzan/vant/compare/v2.12.1...v2.12.2) + +`2021-01-02` + +**Feature** + +- Calendar: add scrollToDate method [#7847](https://github.com/youzan/vant/issues/7847) +- Form: add disabled prop [#7829](https://github.com/youzan/vant/issues/7829) +- Form: add readonly prop [#7829](https://github.com/youzan/vant/issues/7829) +- Loading: add text-color prop [#7846](https://github.com/youzan/vant/issues/7846) +- IndexBar: add scrollTo method [#7845](https://github.com/youzan/vant/issues/7845) +- NumberKeyboard: add random-key-order prop [#7841](https://github.com/youzan/vant/issues/7841) + ### [v2.12.1](https://github.com/youzan/vant/compare/v2.12.0...v2.12.1) `2020-12-26` diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md index d72b26669..3bdad809c 100644 --- a/docs/markdown/changelog.zh-CN.md +++ b/docs/markdown/changelog.zh-CN.md @@ -16,6 +16,19 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。 ## 更新内容 +### [v2.12.2](https://github.com/youzan/vant/compare/v2.12.1...v2.12.2) + +`2021-01-02` + +**Feature** + +- Calendar: 新增 scrollToDate 方法 [#7847](https://github.com/youzan/vant/issues/7847) +- Form: 新增 disabled 属性 [#7829](https://github.com/youzan/vant/issues/7829) +- Form: 新增 readonly 属性 [#7829](https://github.com/youzan/vant/issues/7829) +- Loading: 新增 text-color 属性 [#7846](https://github.com/youzan/vant/issues/7846) +- IndexBar: 新增 scrollTo 方法 [#7845](https://github.com/youzan/vant/issues/7845) +- NumberKeyboard: 新增 random-key-order 属性 [#7841](https://github.com/youzan/vant/issues/7841) + ### [v2.12.1](https://github.com/youzan/vant/compare/v2.12.0...v2.12.1) `2020-12-26`