feat(Sku): add disable-soldout-sku prop (#7759)

* feat(Sku): 售罄sku支持点击

* feat(Sku): add disable-soldout-sku prop

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

src/sku/README.md

@@ -134,6 +134,7 @@ export default {
 | stepper-title | Quantity title | _string_ | `Quantity` |
 | custom-stepper-config | Custom stepper related config | _object_ | `{}` |
 | message-config | Message related config | _object_ | `{}` |
+| disable-soldout-sku | Whether to disable soldout sku | _boolean_ | `true` |
 | get-container | Return the mount node for sku | _string \| () => Element_ | - |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
 | start-sale-num `v2.3.0` | Minimum quantity | _number_ | `1` |

src/sku/README.zh-CN.md

@@ -140,6 +140,7 @@ export default {
 | get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
 | initial-sku | 默认选中的 sku，具体参考高级用法 | _object_ | `{}` |
 | show-soldout-sku | 是否展示售罄的 sku，默认展示并置灰 | _boolean_ | `true` |
+| disable-soldout-sku | 是否禁用售罄的 sku | _boolean_ | `true` |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
 | start-sale-num `v2.3.0` | 起售数量 | _number_ | `1` |
 | properties `v2.4.2` | 商品属性 | _array_ | - |

src/sku/Sku.js

@@ -73,6 +73,10 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
+    disableSoldoutSku: {
+      type: Boolean,
+      default: true,
+    },
     customStepperConfig: {
       type: Object,
       default: () => ({}),
@@ -655,6 +659,7 @@ export default createComponent({
       stepperTitle,
       selectedSkuComb,
       showHeaderImage,
+      disableSoldoutSku,
     } = this;
 
     const slotsProps = {
@@ -720,6 +725,7 @@ export default createComponent({
                   skuKeyStr={skuTreeItem.k_s}
                   selectedSku={selectedSku}
                   skuEventBus={skuEventBus}
+                  disableSoldoutSku={disableSoldoutSku}
                   largeImageMode={skuTreeItem.largeImageMode}
                 />
               ))}

src/sku/components/SkuRowItem.js

@@ -16,6 +16,7 @@ export default createComponent({
     skuEventBus: Object,
     selectedSku: Object,
     largeImageMode: Boolean,
+    disableSoldoutSku: Boolean,
     skuList: {
       type: Array,
       default: () => [],
@@ -32,6 +33,10 @@ export default createComponent({
     },
 
     choosable() {
+      if (!this.disableSoldoutSku) {
+        return true;
+      }
+
       return isSkuChoosable(this.skuList, this.selectedSku, {
         key: this.skuKeyStr,
         valueId: this.skuValue.id,