refactor(Sku): rename largePicturePreview to largeImageMode

src/sku/README.md

@@ -204,7 +204,7 @@ sku: {
           previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
         }
       ],
-      large_picture_preview: true, //  Whether to display large image mode
+      largeImageMode: true, //  whether to enable large image mode
     }
   ],
   list: [

src/sku/README.zh-CN.md

@@ -212,7 +212,7 @@ sku: {
           previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
         }
       ],
-      large_picture_preview: true, //  是否展示大图模式
+      largeImageMode: true, //  是否展示大图模式
     }
   ],
   // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合

src/sku/Sku.js

@@ -680,13 +680,13 @@ export default createComponent({
           {this.skuTree.map((skuTreeItem) => (
             <SkuRow
               skuRow={skuTreeItem}
-              largePicturePreview={skuTreeItem.large_picture_preview}
+              largeImageMode={skuTreeItem.largeImageMode}
               hasScrollTab={skuTreeItem.v.length > 6}
             >
               {skuTreeItem.v.map((skuValue, itemIndex) => (
                 <template
                   slot={
-                    skuTreeItem.large_picture_preview
+                    skuTreeItem.largeImageMode
                       ? Math.floor(itemIndex / 3) % 2 === 0
                         ? 'sku-item-group-one'
                         : 'sku-item-group-two'
@@ -700,7 +700,7 @@ export default createComponent({
                     skuKeyStr={skuTreeItem.k_s}
                     selectedSku={selectedSku}
                     skuEventBus={skuEventBus}
-                    largePicturePreview={skuTreeItem.large_picture_preview}
+                    largeImageMode={skuTreeItem.largeImageMode}
                   ></SkuRowItem>
                 </template>
               ))}

src/sku/components/SkuRow.js

@@ -8,7 +8,7 @@ const [createComponent, bem, t] = createNamespace('sku-row');
 export default createComponent({
   mixins: [
     BindEventMixin(function (bind) {
-      if (!(this.largePicturePreview && this.hasScrollTab)) {
+      if (!(this.largeImageMode && this.hasScrollTab)) {
         return false;
       }
 
@@ -21,7 +21,7 @@ export default createComponent({
   ],
   props: {
     skuRow: Object,
-    largePicturePreview: {
+    largeImageMode: {
       type: Boolean,
       default: false,
     },
@@ -40,7 +40,7 @@ export default createComponent({
   },
   computed: {
     scrollStyle() {
-      if (!(this.largePicturePreview && this.hasScrollTab)) {
+      if (!(this.largeImageMode && this.hasScrollTab)) {
         return false;
       }
       this.tranX = this.present * 20;
@@ -60,7 +60,7 @@ export default createComponent({
     },
   },
   render() {
-    const { skuRow, largePicturePreview, hasScrollTab } = this;
+    const { skuRow, largeImageMode, hasScrollTab } = this;
     const multipleNode = skuRow.is_multiple && (
       <span class={bem('title-multiple')}>（{t('multiple')}）</span>
     );
@@ -86,15 +86,13 @@ export default createComponent({
       </div>
     );
     return (
-      <div
+      <div class={[bem(), BORDER_BOTTOM, largeImageMode && bem('picture')]}>
-        class={[bem(), BORDER_BOTTOM, largePicturePreview && bem('picture')]}
-      >
         <div class={bem('title')}>
           {skuRow.k}
           {multipleNode}
         </div>
-        {largePicturePreview ? SkuContent : this.slots()}
+        {largeImageMode ? SkuContent : this.slots()}
-        {largePicturePreview && hasScrollTab && SkuScroll}
+        {largeImageMode && hasScrollTab && SkuScroll}
       </div>
     );
   },

src/sku/components/SkuRowItem.js

@@ -10,7 +10,7 @@ export default createComponent({
     skuKeyStr: String,
     skuEventBus: Object,
     selectedSku: Object,
-    largePicturePreview: Boolean,
+    largeImageMode: Boolean,
     skuList: {
       type: Array,
       default: () => [],
@@ -20,7 +20,7 @@ export default createComponent({
   computed: {
     imgUrl() {
       const url = this.skuValue.imgUrl || this.skuValue.img_url;
-      return this.largePicturePreview
+      return this.largeImageMode
         ? url ||
             'https://img.yzcdn.cn/upload_files/2020/06/24/FmKWDg0bN9rMcTp9ne8MXiQWGtLn.png'
         : url;
@@ -52,7 +52,7 @@ export default createComponent({
     genImage(classPrefix) {
       const { imgUrl } = this;
       if (imgUrl) {
-        if (this.largePicturePreview && this.lazyLoad) {
+        if (this.largeImageMode && this.lazyLoad) {
           return (
             <img class={`${classPrefix}-img`} src={imgUrl} vLazy={imgUrl} />
           );
@@ -65,7 +65,7 @@ export default createComponent({
 
   render() {
     const choosed = this.skuValue.id === this.selectedSku[this.skuKeyStr];
-    const classPrefix = this.largePicturePreview
+    const classPrefix = this.largeImageMode
       ? 'van-sku-row__picture-item'
       : 'van-sku-row__item';
 
@@ -78,7 +78,7 @@ export default createComponent({
         ]}
         onClick={this.onSelect}
       >
-        {this.largePicturePreview && (
+        {this.largeImageMode && (
           <img
             class={`${classPrefix}-img-icon`}
             src="https://img.yzcdn.cn/upload_files/2020/06/18/Fn6Qf0fGRFyuD8xh0Gi1w2ng59G1.png"
@@ -87,9 +87,7 @@ export default createComponent({
         )}
         {this.genImage(classPrefix)}
         <div class={`${classPrefix}-name`}>
-          <span
+          <span class={this.largeImageMode ? 'van-multi-ellipsis--l2' : ''}>
-            class={this.largePicturePreview ? 'van-multi-ellipsis--l2' : ''}
-          >
             {this.skuValue.name}
           </span>
         </div>

src/sku/demo/data.ts

@@ -1,4 +1,4 @@
-export function getSkuData(large_picture_preview = false) {
+export function getSkuData(largeImageMode = false) {
   return {
     goods_id: '1',
     quota: 5,
@@ -37,7 +37,7 @@ export function getSkuData(large_picture_preview = false) {
               imgUrl: 'https://b.yzcdn.cn/vant/sku/shoes-3.png',
             },
           ],
-          large_picture_preview,
+          largeImageMode,
         },
         {
           k: '尺寸',

src/sku/demo/index.vue

@@ -79,7 +79,7 @@
       </div>
     </demo-block>
 
-    <demo-block :title="t('largePicturePreview')">
+    <demo-block :title="t('largeImageMode')">
       <div class="sku-container">
         <van-sku
           v-model="showLargePicturePreview"
@@ -108,7 +108,7 @@
           type="primary"
           @click="showLargePicturePreview = true"
         >
-          {{ t('largePicturePreview') }}
+          {{ t('largeImageMode') }}
         </van-button>
       </div>
     </demo-block>
@@ -188,7 +188,7 @@ export default {
       customBySlot: '通过插槽定制',
       customStepper: '自定义步进器',
       hideSoldoutSku: '隐藏售罄规格',
-      largePicturePreview: '大图预览模式',
+      largeImageMode: '大图预览模式',
     },
     'en-US': {
       button1: 'Button',
@@ -198,7 +198,7 @@ export default {
       stepperTitle: 'Stepper title',
       customStepper: 'Custom Stepper',
       hideSoldoutSku: 'Hide Soldout Sku',
-      largePicturePreview: 'Large Picture Preview',
+      largeImageMode: 'Large Image Mode',
     },
   },