feat(sku): add sku-actions-top slot (#5617)

src/sku/README.md

@@ -178,6 +178,7 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Sku instance and call instance m
 | extra-sku-group | Extra custom content |
 | sku-stepper | Custom stepper |
 | sku-messages | Custom messages |
+| sku-actions-top | Custom content before sku-actions |
 | sku-actions | Custom button actions |
 
 ### Sku Data Structure

src/sku/README.zh-CN.md

@@ -184,6 +184,7 @@ Sku 组件默认划分好了若干区块，这些区块都定义成了插槽，
 | extra-sku-group | 额外商品 sku 展示区，一般用不到 |
 | sku-stepper | 商品数量选择区 |
 | sku-messages | 商品留言区 |
+| sku-actions-top | 操作按钮区顶部内容，无默认展示内容，按需使用 |
 | sku-actions | 操作按钮区 |
 
 ### sku 对象结构

src/sku/Sku.js

@@ -728,6 +728,7 @@ export default createComponent({
           {Stepper}
           {Messages}
         </div>
+        {slots('sku-actions-top')}
         {Actions}
       </Popup>
     );

src/sku/demo/index.vue

@@ -109,6 +109,11 @@
               <span class="van-sku__price-num">{{ price }}</span>
             </div>
           </template>
+          <template #sku-actions-top>
+            <div class="van-sku-header-item text-center">
+              {{ $t('actionsTop') }}
+            </div>
+          </template>
           <template #sku-actions="{ skuEventBus }">
             <div class="van-sku-actions">
               <van-button
@@ -150,6 +155,7 @@ export default {
       stepperTitle: '我要买',
       button1: '积分兑换',
       button2: '买买买',
+      actionsTop: '商品不多，赶快购买吧',
     },
     'en-US': {
       title2: 'Custom Stepper Related Config',
@@ -157,6 +163,7 @@ export default {
       stepperTitle: 'Stepper title',
       button1: 'Button',
       button2: 'Button',
+      actionsTop: 'action top info',
     },
   },
 
@@ -225,5 +232,9 @@ export default {
   .sku-container {
     padding: 0 @padding-md;
   }
+
+  .text-center {
+    text-align: center;
+  }
 }
 </style>