diff --git a/packages/collapse-item/index.ts b/packages/collapse-item/index.ts index 28646934..c9b8f68a 100644 --- a/packages/collapse-item/index.ts +++ b/packages/collapse-item/index.ts @@ -1,3 +1,4 @@ +import { getRect } from '../common/utils'; import { VantComponent } from '../common/component'; VantComponent({ @@ -70,11 +71,9 @@ VantComponent({ updateStyle(expanded: boolean) { const { inited } = this; - this.getRect('.van-collapse-item__content') - .then( - (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => - rect.height - ) + getRect + .call(this, '.van-collapse-item__content') + .then((rect) => rect.height) .then((height: number) => { const { animation } = this; diff --git a/packages/dropdown-menu/index.ts b/packages/dropdown-menu/index.ts index a5cc262e..342081cd 100644 --- a/packages/dropdown-menu/index.ts +++ b/packages/dropdown-menu/index.ts @@ -1,5 +1,5 @@ import { VantComponent } from '../common/component'; -import { addUnit } from '../common/utils'; +import { addUnit, getRect } from '../common/utils'; type TrivialInstance = WechatMiniprogram.Component.TrivialInstance; let ARRAY: TrivialInstance[] = []; @@ -101,23 +101,20 @@ VantComponent({ getChildWrapperStyle() { const { zIndex, direction } = this.data; - return this.getRect('.van-dropdown-menu').then( - (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => { - const { top = 0, bottom = 0 } = rect; - const offset = - direction === 'down' ? bottom : this.windowHeight - top; + return getRect.call(this, '.van-dropdown-menu').then((rect) => { + const { top = 0, bottom = 0 } = rect; + const offset = direction === 'down' ? bottom : this.windowHeight - top; - let wrapperStyle = `z-index: ${zIndex};`; + let wrapperStyle = `z-index: ${zIndex};`; - if (direction === 'down') { - wrapperStyle += `top: ${addUnit(offset)};`; - } else { - wrapperStyle += `bottom: ${addUnit(offset)};`; - } - - return wrapperStyle; + if (direction === 'down') { + wrapperStyle += `top: ${addUnit(offset)};`; + } else { + wrapperStyle += `bottom: ${addUnit(offset)};`; } - ); + + return wrapperStyle; + }); }, onTitleTap(event: WechatMiniprogram.TouchEvent) { diff --git a/packages/index-anchor/index.ts b/packages/index-anchor/index.ts index 27004367..693f113e 100644 --- a/packages/index-anchor/index.ts +++ b/packages/index-anchor/index.ts @@ -1,3 +1,4 @@ +import { getRect } from '../common/utils'; import { VantComponent } from '../common/component'; VantComponent({ @@ -20,18 +21,12 @@ VantComponent({ methods: { scrollIntoView(scrollTop) { - this.getBoundingClientRect().then( - (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => { - wx.pageScrollTo({ - duration: 0, - scrollTop: scrollTop + rect.top - this.parent.data.stickyOffsetTop, - }); - } - ); - }, - - getBoundingClientRect() { - return this.getRect('.van-index-anchor-wrapper'); + getRect.call(this, '.van-index-anchor-wrapper').then((rect) => { + wx.pageScrollTo({ + duration: 0, + scrollTop: scrollTop + rect.top - this.parent.data.stickyOffsetTop, + }); + }); }, }, }); diff --git a/packages/mixins/basic.ts b/packages/mixins/basic.ts index 66943b7a..db152be4 100644 --- a/packages/mixins/basic.ts +++ b/packages/mixins/basic.ts @@ -13,23 +13,5 @@ export const basic = Behavior({ return new Promise((resolve) => wx.nextTick(resolve)); }, - - getRect(selector: string, all: boolean) { - return new Promise((resolve) => { - wx.createSelectorQuery() - .in(this) - [all ? 'selectAll' : 'select'](selector) - .boundingClientRect((rect) => { - if (all && Array.isArray(rect) && rect.length) { - resolve(rect); - } - - if (!all && rect) { - resolve(rect); - } - }) - .exec(); - }); - }, }, }); diff --git a/packages/rate/index.ts b/packages/rate/index.ts index c3150e91..41fcbd00 100644 --- a/packages/rate/index.ts +++ b/packages/rate/index.ts @@ -1,3 +1,4 @@ +import { getAllRect } from '../common/utils'; import { VantComponent } from '../common/component'; import { canIUseModel } from '../common/version'; @@ -82,19 +83,17 @@ VantComponent({ const { clientX } = event.touches[0]; - this.getRect('.van-rate__icon', true).then( - (list: WechatMiniprogram.BoundingClientRectCallbackResult[]) => { - const target = list - .sort((item) => item.right - item.left) - .find((item) => clientX >= item.left && clientX <= item.right); - if (target != null) { - this.onSelect({ - ...event, - currentTarget: target, - }); - } + getAllRect.call(this, '.van-rate__icon').then((list) => { + const target = list + .sort((item) => item.right - item.left) + .find((item) => clientX >= item.left && clientX <= item.right); + if (target != null) { + this.onSelect({ + ...event, + currentTarget: target, + }); } - ); + }); }, }, }); diff --git a/packages/slider/index.ts b/packages/slider/index.ts index e98ab77a..efbbc219 100644 --- a/packages/slider/index.ts +++ b/packages/slider/index.ts @@ -1,6 +1,7 @@ import { VantComponent } from '../common/component'; import { touch } from '../mixins/touch'; import { canIUseModel } from '../common/version'; +import { getRect } from '../common/utils'; VantComponent({ mixins: [touch], @@ -60,13 +61,11 @@ VantComponent({ this.touchMove(event); this.dragStatus = 'draging'; - this.getRect('.van-slider').then( - (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => { - const diff = (this.deltaX / rect.width) * 100; - this.newValue = this.startValue + diff; - this.updateValue(this.newValue, false, true); - } - ); + getRect.call(this, '.van-slider').then((rect) => { + const diff = (this.deltaX / rect.width) * 100; + this.newValue = this.startValue + diff; + this.updateValue(this.newValue, false, true); + }); }, onTouchEnd() { @@ -83,13 +82,11 @@ VantComponent({ const { min } = this.data; - this.getRect('.van-slider').then( - (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => { - const value = - ((event.detail.x - rect.left) / rect.width) * this.getRange() + min; - this.updateValue(value, true); - } - ); + getRect.call(this, '.van-slider').then((rect) => { + const value = + ((event.detail.x - rect.left) / rect.width) * this.getRange() + min; + this.updateValue(value, true); + }); }, updateValue(value: number, end: boolean, drag: boolean) { diff --git a/packages/sticky/index.ts b/packages/sticky/index.ts index 3230ad27..5860be2e 100644 --- a/packages/sticky/index.ts +++ b/packages/sticky/index.ts @@ -1,10 +1,9 @@ +import { getRect } from '../common/utils'; import { VantComponent } from '../common/component'; import { pageScrollMixin } from '../mixins/page-scroll'; const ROOT_ELEMENT = '.van-sticky'; -type BoundingClientRect = WechatMiniprogram.BoundingClientRectCallbackResult; - VantComponent({ props: { zIndex: { @@ -66,29 +65,30 @@ VantComponent({ this.scrollTop = scrollTop || this.scrollTop; if (typeof container === 'function') { - Promise.all([this.getRect(ROOT_ELEMENT), this.getContainerRect()]).then( - ([root, container]: BoundingClientRect[]) => { - if (offsetTop + root.height > container.height + container.top) { - this.setDataAfterDiff({ - fixed: false, - transform: container.height - root.height, - }); - } else if (offsetTop >= root.top) { - this.setDataAfterDiff({ - fixed: true, - height: root.height, - transform: 0, - }); - } else { - this.setDataAfterDiff({ fixed: false, transform: 0 }); - } + Promise.all([ + getRect.call(this, ROOT_ELEMENT), + this.getContainerRect(), + ]).then(([root, container]) => { + if (offsetTop + root.height > container.height + container.top) { + this.setDataAfterDiff({ + fixed: false, + transform: container.height - root.height, + }); + } else if (offsetTop >= root.top) { + this.setDataAfterDiff({ + fixed: true, + height: root.height, + transform: 0, + }); + } else { + this.setDataAfterDiff({ fixed: false, transform: 0 }); } - ); + }); return; } - this.getRect(ROOT_ELEMENT).then((root: BoundingClientRect) => { + getRect.call(this, ROOT_ELEMENT).then((root) => { if (offsetTop >= root.top) { this.setDataAfterDiff({ fixed: true, height: root.height }); this.transform = 0; diff --git a/packages/tree-select/index.ts b/packages/tree-select/index.ts index f02ea320..2532003a 100644 --- a/packages/tree-select/index.ts +++ b/packages/tree-select/index.ts @@ -70,7 +70,7 @@ VantComponent({ const { items, mainActiveIndex } = this.data; const { children = [] } = items[mainActiveIndex] || {}; - return this.set({ subItems: children }); + this.setData({ subItems: children }); }, }, });