diff --git a/src/sku/Sku.js b/src/sku/Sku.js index 5b6d4e47b..dca1a8851 100644 --- a/src/sku/Sku.js +++ b/src/sku/Sku.js @@ -430,6 +430,8 @@ export default createComponent({ selectedProp: this.selectedProp, selectedSkuComb: this.selectedSkuComb, }); + + this.centerInitialSku(); }, getSkuMessages() { @@ -605,6 +607,18 @@ export default createComponent({ selectedSkuComb: this.selectedSkuComb, }; }, + + // 当 popup 完全打开后执行 + onOpened() { + this.centerInitialSku(); + }, + + centerInitialSku() { + (this.$refs.skuRows || []).forEach((it) => { + const { k_s } = it.skuRow || {}; + it.centerItem(this.initialSku[k_s]); + }); + }, }, render() { @@ -681,7 +695,7 @@ export default createComponent({ (this.hasSkuOrAttr && (
{this.skuTree.map((skuTreeItem) => ( - + {skuTreeItem.v.map((skuValue) => ( {Header}
diff --git a/src/sku/components/SkuRow.js b/src/sku/components/SkuRow.js index 3f4de3575..ab8c5056c 100644 --- a/src/sku/components/SkuRow.js +++ b/src/sku/components/SkuRow.js @@ -1,6 +1,8 @@ // Utils import { createNamespace } from '../../utils'; import { BORDER_BOTTOM } from '../../utils/constant'; +// Mixins +import { ParentMixin } from '../../mixins/relation'; import { BindEventMixin } from '../../mixins/bind-event'; const [createComponent, bem, t] = createNamespace('sku-row'); @@ -9,6 +11,7 @@ export { bem }; export default createComponent({ mixins: [ + ParentMixin('vanSkuRows'), BindEventMixin(function (bind) { if (this.scrollable && this.$refs.scroller) { bind(this.$refs.scroller, 'scroll', this.onScroll); @@ -90,6 +93,21 @@ export default createComponent({ return nodes; }, + + centerItem(selectSkuId) { + if (!this.skuRow.largeImageMode || !selectSkuId) { + return; + } + const { children = [] } = this; + const { scroller, row } = this.$refs; + const child = children.find((it) => +it.skuValue.id === +selectSkuId); + if (scroller && row && child && child.$el) { + const target = child.$el; + const to = + target.offsetLeft - (scroller.offsetWidth - target.offsetWidth) / 2; + scroller.scrollLeft = to; + } + }, }, render() { diff --git a/src/sku/components/SkuRowItem.js b/src/sku/components/SkuRowItem.js index a2d89f5d0..3bb2611a7 100644 --- a/src/sku/components/SkuRowItem.js +++ b/src/sku/components/SkuRowItem.js @@ -1,11 +1,14 @@ import { bem } from './SkuRow'; import { createNamespace } from '../../utils'; import { isSkuChoosable } from '../utils/sku-helper'; +import { ChildrenMixin } from '../../mixins/relation'; import Image from '../../image'; const [createComponent] = createNamespace('sku-row-item'); export default createComponent({ + mixins: [ChildrenMixin('vanSkuRows')], + props: { lazyLoad: Boolean, skuValue: Object,