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,