feat(Sku): add stockThreshold prop (#4444)

src/sku/Sku.js

@@ -14,8 +14,7 @@ import { isAllSelected, isSkuChoosable, getSkuComb, getSelectedSkuValues } from
 import { LIMIT_TYPE, UNSELECTED_SKU_VALUE_ID } from './constants';
 
 const namespace = createNamespace('sku');
-const createComponent = namespace[0];
-const t = namespace[2];
+const [createComponent, bem, t] = namespace;
 const { QUOTA_LIMIT } = LIMIT_TYPE;
 
 export default createComponent({
@@ -50,6 +49,10 @@ export default createComponent({
       type: Object,
       default: () => ({})
     },
+    stockThreshold: {
+      type: Number,
+      default: 50,
+    },
     showSoldoutSku: {
       type: Boolean,
       default: true
@@ -224,7 +227,13 @@ export default createComponent({
       const { stockFormatter } = this.customStepperConfig;
       if (stockFormatter) return stockFormatter(this.stock);
 
-      return t('stock', this.stock);
+      return [
+        `${t('stock')} `,
+        <span class={bem('stock-num', { highlight: this.stock < this.stockThreshold })}>
+          {this.stock}
+        </span>,
+        ` ${t('stockUnit')}`
+      ];
     },
 
     quotaText() {