feat(Sku): auto center in largeImageMode (#6633)

* feat(Sku): 大图模式下支持自动定位到选中

* fix(Sku): 修改居中实现

Co-authored-by: songweite <songweite@youzan.com>

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 && (
         <div class={this.skuGroupClass}>
           {this.skuTree.map((skuTreeItem) => (
-            <SkuRow skuRow={skuTreeItem}>
+            <SkuRow skuRow={skuTreeItem} ref="skuRows" refInFor>
               {skuTreeItem.v.map((skuValue) => (
                 <SkuRowItem
                   skuList={sku.list}
@@ -759,6 +773,7 @@ export default createComponent({
         getContainer={this.getContainer}
         closeOnClickOverlay={this.closeOnClickOverlay}
         safeAreaInsetBottom={this.safeAreaInsetBottom}
+        onOpened={this.onOpened}
       >
         {Header}
         <div class="van-sku-body" style={this.bodyStyle}>

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() {

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,