feat(Sku): use popup close icon (#4386)

src/sku/Sku.js

@@ -260,7 +260,6 @@ export default createComponent({
     const skuEventBus = new Vue();
     this.skuEventBus = skuEventBus;
 
-    skuEventBus.$on('sku:close', this.onClose);
     skuEventBus.$on('sku:select', this.onSelect);
     skuEventBus.$on('sku:numChange', this.onNumChange);
     skuEventBus.$on('sku:previewImage', this.onPreviewImage);
@@ -339,10 +338,6 @@ export default createComponent({
       return t('selectSku');
     },
 
-    onClose() {
-      this.show = false;
-    },
-
     onSelect(skuValue) {
       // 点击已选中的sku时则取消选中
       this.selectedSku =
@@ -547,11 +542,13 @@ export default createComponent({
     return (
       <Popup
         vModel={this.show}
+        round
+        closeable
         position="bottom"
+        closeIcon="clear"
         class="van-sku-container"
         getContainer={this.getContainer}
         closeOnClickOverlay={this.closeOnClickOverlay}
-        round
       >
         {Header}
         <div class="van-sku-body" style={this.bodyStyle}>

src/sku/components/SkuHeader.tsx

@@ -1,7 +1,6 @@
 import { createNamespace } from '../../utils';
 import { inherit } from '../../utils/functional';
 import { BORDER_BOTTOM } from '../../utils/constant';
-import Icon from '../../icon';
 
 // Types
 import Vue, { CreateElement, RenderContext } from 'vue/types';
@@ -53,16 +52,7 @@ function SkuHeader(
       <div class={bem('img-wrap')} onClick={previewImage}>
         <img src={goodsImg} />
       </div>
-      <div class={bem('goods-info')}>
-        {slots.default && slots.default()}
-        <Icon
-          name="clear"
-          class="van-sku__close-icon"
-          onClick={() => {
-            skuEventBus.$emit('sku:close');
-          }}
-        />
-      </div>
+      <div class={bem('goods-info')}>{slots.default && slots.default()}</div>
     </div>
   );
 }

src/sku/index.less

@@ -11,6 +11,12 @@
     overflow-y: visible;
     font-size: @font-size-md;
     background: @white;
+
+    .van-popup__close-icon {
+      top: @padding-sm;
+      color: @sku-icon-gray-color;
+      font-size: 20px;
+    }
   }
 
   &-body {
@@ -103,15 +109,6 @@
     }
   }
 
-  &__close-icon {
-    position: absolute;
-    top: @padding-sm;
-    right: @padding-md;
-    color: @sku-icon-gray-color;
-    font-size: 20px;
-    text-align: center;
-  }
-
   &-group-container {
     margin-left: @padding-md;
     padding: @padding-sm 0 2px;

src/sticky/test/__snapshots__/demo.spec.js.snap

@@ -4,24 +4,18 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div>
-      <div class="van-sticky"><button class="van-button van-button--primary van-button--normal" style="margin-left: 15px;"><span class="van-button__text">
-        基础用法
-      </span></button></div>
+      <div class="van-sticky"><button class="van-button van-button--primary van-button--normal" style="margin-left: 15px;"><span class="van-button__text">基础用法</span></button></div>
     </div>
   </div>
   <div>
     <div style="height: 0px;">
-      <div class="van-sticky van-sticky--fixed" style="top: 50px;"><button class="van-button van-button--info van-button--normal" style="margin-left: 115px;"><span class="van-button__text">
-        吸顶距离
-      </span></button></div>
+      <div class="van-sticky van-sticky--fixed" style="top: 50px;"><button class="van-button van-button--info van-button--normal" style="margin-left: 115px;"><span class="van-button__text">吸顶距离</span></button></div>
     </div>
   </div>
   <div>
     <div style="height: 150px; background-color: rgb(255, 255, 255);">
       <div>
-        <div class="van-sticky"><button class="van-button van-button--warning van-button--normal" style="margin-left: 215px;"><span class="van-button__text">
-          指定容器
-        </span></button></div>
+        <div class="van-sticky"><button class="van-button van-button--warning van-button--normal" style="margin-left: 215px;"><span class="van-button__text">指定容器</span></button></div>
       </div>
     </div>
   </div>