feat(Popup): add close-icon prop (#4366)

src/popup/README.md

@@ -58,6 +58,15 @@ Use `position` prop to set popup display position
   position="bottom"
   :style="{ height: '20%' }"
 />
+
+<!-- Custom Icon -->
+<van-popup
+  v-model="show"
+  closeable
+  close-icon="close"
+  position="bottom"
+  :style="{ height: '20%' }"
+/>
 ```
 
 ### Round Corner
@@ -121,9 +130,11 @@ export default {
 | lock-scroll | Whether to lock background scroll | *boolean* | `true` | - |
 | lazy-render | Whether to lazy render util appeared | *boolean* | `true` | - |
 | close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` | - |
+| closeable | Whether to show close icon | *boolean* | `false` | 2.2.0 |
+| close-icon | Close icon name | *string* | `cross` | 2.2.0 |
 | transition | Transition | *string* | `popup-slide` | - |
 | get-container | Return the mount node for Popup | *string \| () => HTMLElement* | - | - |
-| closeable | Whether to show close icon | *boolean* | `false` | 2.2.0 |
+
 
 ### Events
 

src/popup/README.zh-CN.md

@@ -57,7 +57,7 @@ export default {
 
 ### 关闭图标
 
-设置`closeable`属性后，会在弹出层的右上角显示关闭图标
+设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标
 
 ```html
 <van-popup
@@ -66,6 +66,15 @@ export default {
   position="bottom"
   :style="{ height: '20%' }"
 />
+
+<!-- 自定义图标 -->
+<van-popup
+  v-model="show"
+  closeable
+  close-icon="close"
+  position="bottom"
+  :style="{ height: '20%' }"
+/>
 ```
 
 ### 圆角弹窗
@@ -133,6 +142,7 @@ export default {
 | lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` | - |
 | close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` | - |
 | closeable | 是否显示关闭图标 | *boolean* | `false` | 2.2.0 |
+| close-icon | 关闭图标名称或图片链接 | *string* | `cross` | 2.2.0 |
 | transition | 动画类名，用法与 Vue 原生`transtion`组件的`name`属性一致 | *string* | - | - |
 | get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => HTMLElement* | - | - |
 

src/popup/demo/index.vue

@@ -28,6 +28,15 @@
     <demo-block v-if="!$attrs.weapp" :title="$t('closeIcon')">
       <van-button type="primary" @click="showCloseIcon = true">{{ $t('closeIcon') }}</van-button>
       <van-popup v-model="showCloseIcon" closeable position="bottom" :style="{ height: '20%' }" />
+
+      <van-button type="primary" @click="showCustomCloseIcon = true">{{ $t('customCloseIcon') }}</van-button>
+      <van-popup
+        v-model="showCustomCloseIcon"
+        closeable
+        close-icon="close"
+        position="bottom"
+        :style="{ height: '20%' }"
+      />
     </demo-block>
 
     <demo-block v-if="!$attrs.weapp" :title="$t('roundCorner')">
@@ -54,7 +63,8 @@ export default {
       buttonRight: '右侧弹出',
       getContainer: '指定挂载节点',
       roundCorner: '圆角弹窗',
-      closeIcon: '关闭图标'
+      closeIcon: '关闭图标',
+      customCloseIcon: '自定义图标'
     },
     'en-US': {
       position: 'Position',
@@ -65,7 +75,8 @@ export default {
       buttonRight: 'From Right',
       getContainer: 'Get Container',
       roundCorner: 'Round Corner',
-      closeIcon: 'Close Icon'
+      closeIcon: 'Close Icon',
+      customCloseIcon: 'Custom Icon'
     }
   },
 
@@ -78,7 +89,8 @@ export default {
       showRight: false,
       showCloseIcon: false,
       showRoundCorner: false,
-      showGetContainer: false
+      showGetContainer: false,
+      showCustomCloseIcon: false,
     };
   }
 };

src/popup/index.js

@@ -12,6 +12,10 @@ export default createComponent({
     duration: Number,
     closeable: Boolean,
     transition: String,
+    closeIcon: {
+      type: String,
+      default: 'cross'
+    },
     position: {
       type: String,
       default: 'center'
@@ -64,7 +68,7 @@ export default createComponent({
         >
           {this.slots()}
           {this.closeable && (
-            <Icon name="cross" class={bem('close-icon')} onClick={this.close} />
+            <Icon name={this.closeIcon} class={bem('close-icon')} onClick={this.close} />
           )}
         </div>
       </transition>

src/popup/index.less

@@ -89,6 +89,10 @@
       right: @popup-close-icon-margin;
       color: @popup-close-icon-color;
       font-size: @popup-close-icon-size;
+
+      &:active {
+        opacity: .6;
+      }
     }
   }
 }

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

@@ -14,6 +14,7 @@ exports[`renders demo correctly 1`] = `
     <!---->
   </div>
   <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">关闭图标</span></button>
+    <!----> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">自定义图标</span></button>
     <!---->
   </div>
   <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">圆角弹窗</span></button>

src/popup/test/__snapshots__/index.spec.js.snap

@@ -1,5 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`close-icon prop 1`] = `
+<div class="van-popup van-popup--center" name="van-fade"><i class="van-icon van-icon-success van-popup__close-icon">
+    <!----></i></div>
+`;
+
 exports[`duration prop 1`] = `<div class="van-popup van-popup--center" style="transition-duration: 0.5s;" name="van-fade"></div>`;
 
 exports[`reset z-index 1`] = `<div class="van-popup van-popup--center" name="van-fade"></div>`;

src/popup/test/index.spec.js

@@ -239,3 +239,15 @@ test('closeable prop', () => {
   wrapper.find('.van-popup__close-icon').trigger('click');
   expect(wrapper.emitted('input')[0][0]).toEqual(false);
 });
+
+test('close-icon prop', () => {
+  const wrapper = mount(Popup, {
+    propsData: {
+      value: true,
+      closeable: true,
+      closeIcon: 'success'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});