feat(GoodsActionIcon): add dot prop

youzan · Mar 10, 2020 · b983ac0 · b983ac0
1 parent f2e9e19
commit b983ac0
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 6 deletions.
diff --git a/src/goods-action-icon/index.js b/src/goods-action-icon/index.js
@@ -11,6 +11,7 @@ export default createComponent({
 
   props: {
     ...routeProps,
+    dot: Boolean,
     text: String,
     icon: String,
     color: String,
@@ -31,7 +32,7 @@ export default createComponent({
         return (
           <div class={bem('icon')}>
             {slot}
-            <Info info={this.info} />
+            <Info dot={this.dot} info={this.info} />
           </div>
         );
       }
@@ -40,6 +41,7 @@ export default createComponent({
         <Icon
           class={[bem('icon'), this.iconClass]}
           tag="div"
+          dot={this.dot}
           info={this.info}
           name={this.icon}
           color={this.color}

diff --git a/src/goods-action/README.md b/src/goods-action/README.md
@@ -45,7 +45,7 @@ Use `info` prop to show badge in icon
 
 ```html
 <van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="Icon1" />
+  <van-goods-action-icon icon="chat-o" text="Icon1" dot />
   <van-goods-action-icon icon="cart-o" text="Icon2" info="5" />
   <van-goods-action-icon icon="shop-o" text="Icon3" info="12" />
   <van-goods-action-button type="warning" text="Button1" />
@@ -92,6 +92,7 @@ Use `info` prop to show badge in icon
 | icon | Icon | *string* | - |
 | color `v2.4.2` | Icon color | *string* | `#323233` |
 | icon-class | Icon class name | *any* | `''` |
+| dot `2.5.5` | Whether to show red dot | *boolean* | - |
 | info | Content of the badge | *number \| string* | - |
 | url | Link | *string* | - |
 | to | Target route of the link, same as to of vue-router | *string \| object* | - |

diff --git a/src/goods-action/README.zh-CN.md b/src/goods-action/README.zh-CN.md
@@ -41,11 +41,11 @@ export default {
 
 ### 徽标提示
 
-通过`info`属性在图标右上角显示徽标
+在 GoodsActionIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
 
 ```html
 <van-goods-action>
-  <van-goods-action-icon icon="chat-o" text="客服" />
+  <van-goods-action-icon icon="chat-o" text="客服" dot />
   <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
   <van-goods-action-icon icon="shop-o" text="店铺" info="12" />
   <van-goods-action-button type="warning" text="加入购物车" />
@@ -96,6 +96,7 @@ export default {
 | icon | 图标 | *string* | - |
 | color `v2.4.2` | 图标颜色 | *string* | `#323233` |
 | icon-class | 图标额外类名 | *any* | - |
+| dot `2.5.5` | 是否显示图标右上角小红点 | *boolean* | `false` |
 | info | 图标右上角徽标的内容 | *number \| string* | - |
 | url | 点击后跳转的链接地址 | *string* | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |

diff --git a/src/goods-action/demo/index.vue b/src/goods-action/demo/index.vue
@@ -27,7 +27,7 @@
 
     <demo-block :title="$t('iconInfo')">
       <van-goods-action>
-        <van-goods-action-icon icon="chat-o" :text="$t('icon1')" />
+        <van-goods-action-icon icon="chat-o" dot :text="$t('icon1')" />
         <van-goods-action-icon icon="cart-o" info="5" :text="$t('icon2')" />
         <van-goods-action-icon icon="shop-o" info="12" :text="$t('icon3')" />
         <van-goods-action-button type="warning" :text="$t('button1')" />

diff --git a/src/goods-action/test/__snapshots__/demo.spec.js.snap b/src/goods-action/test/__snapshots__/demo.spec.js.snap
@@ -20,7 +20,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-goods-action">
       <div role="button" tabindex="0" class="van-goods-action-icon">
         <div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
-          <!---->
+          <div class="van-info van-info--dot"></div>
         </div>客服
       </div>
       <div role="button" tabindex="0" class="van-goods-action-icon">

diff --git a/src/goods-action/test/__snapshots__/index.spec.js.snap b/src/goods-action/test/__snapshots__/index.spec.js.snap
@@ -18,6 +18,13 @@ exports[`Icon render icon slot 1`] = `
 </div>
 `;
 
+exports[`Icon render icon slot with dot 1`] = `
+<div role="button" tabindex="0" class="van-goods-action-icon">
+  <div class="van-goods-action-icon__icon">Custom Icon<div class="van-info van-info--dot"></div>
+  </div>Text
+</div>
+`;
+
 exports[`Icon render icon slot with info 1`] = `
 <div role="button" tabindex="0" class="van-goods-action-icon">
   <div class="van-goods-action-icon__icon">Custom Icon<div class="van-info">1</div>

diff --git a/src/goods-action/test/index.spec.js b/src/goods-action/test/index.spec.js
@@ -66,3 +66,21 @@ test('Icon render icon slot with info', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('Icon render icon slot with dot', () => {
+  const wrapper = mount({
+    render(h) {
+      return h(Icon, {
+        props: {
+          dot: true,
+        },
+        scopedSlots: {
+          default: () => 'Text',
+          icon: () => 'Custom Icon',
+        },
+      });
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});