diff --git a/src/calendar/README.md b/src/calendar/README.md index e95f7b663..efb0fd62e 100644 --- a/src/calendar/README.md +++ b/src/calendar/README.md @@ -334,9 +334,10 @@ Following props are supported when the type is multiple Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) 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 74191c1d2..d9b61042c 100644 --- a/src/calendar/README.zh-CN.md +++ b/src/calendar/README.zh-CN.md @@ -340,9 +340,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 4a2b0c55a..1929690ac 100644 --- a/src/calendar/index.js +++ b/src/calendar/index.js @@ -267,27 +267,8 @@ export default createComponent({ } }; - // scroll to current month - const scrollIntoView = () => { + const scrollToDate = (targetDate) => { raf(() => { - const displayed = props.show || !props.poppable; - if (!displayed) { - return; - } - - onScroll(); - - const { currentDate } = state; - if (!currentDate) { - return; - } - - const targetDate = - props.type === 'single' ? currentDate : currentDate[0]; - if (!targetDate) { - return; - } - months.value.some((month, index) => { if (compareMonth(month, targetDate) === 0) { monthRefs.value[index].scrollIntoView(bodyRef.value); @@ -301,6 +282,22 @@ export default createComponent({ }); }; + // scroll to current month + const scrollIntoView = () => { + if (props.poppable && !props.show) { + return; + } + + const { currentDate } = state; + if (currentDate) { + const targetDate = + props.type === 'single' ? currentDate : currentDate[0]; + scrollToDate(targetDate); + } else { + raf(onScroll); + } + }; + const init = () => { if (props.poppable && !props.show) { return; diff --git a/src/index-bar/README.zh-CN.md b/src/index-bar/README.zh-CN.md index d1d268ad3..11982a717 100644 --- a/src/index-bar/README.zh-CN.md +++ b/src/index-bar/README.zh-CN.md @@ -102,6 +102,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/loading/README.zh-CN.md b/src/loading/README.zh-CN.md index 382bf042a..1fefca376 100644 --- a/src/loading/README.zh-CN.md +++ b/src/loading/README.zh-CN.md @@ -78,14 +78,14 @@ app.use(Loading); ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ---------- | ---------------------------- | ------------------ | ---------- | -| color | 颜色 | _string_ | `#c9c9c9` | -| type | 类型，可选值为 `spinner` | _string_ | `circular` | -| size | 加载图标大小，默认单位为`px` | _number \| string_ | `30px` | -| text-size | 文字大小，默认单位为`px` | _number \| string_ | `14px` | -| text-color | 文字颜色 | _string_ | `#c9c9c9` | -| vertical | 是否垂直排列图标和文字内容 | _boolean_ | `false` | +| 参数 | 说明 | 类型 | 默认值 | +| ---------- | ----------------------------- | ------------------ | ---------- | +| color | 颜色 | _string_ | `#c9c9c9` | +| type | 类型，可选值为 `spinner` | _string_ | `circular` | +| size | 加载图标大小，默认单位为 `px` | _number \| string_ | `30px` | +| text-size | 文字大小，默认单位为 `px` | _number \| string_ | `14px` | +| text-color | 文字颜色 | _string_ | `#c9c9c9` | +| vertical | 是否垂直排列图标和文字内容 | _boolean_ | `false` | ### Slots 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; } 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 ced16e008..3aed6bd5e 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'; @@ -59,7 +60,6 @@ export class ActionBarButton 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 {} @@ -109,6 +109,7 @@ export { Form, Field, ImagePreview, + IndexBar, Lazyload, List, Locale,