[breaking change] Badge: rewrite

example/pages/badge/index.js

@@ -1,11 +1,8 @@
 Page({
-  data: {
+  onChange(event) {
-  },
+    wx.showToast({
-
+      icon: 'none',
-  onLoad: function () {
+      title: `切换至第${event.detail}项`
-
+    });
-  },
+  }
-
+});
-  onShow: function() {
-  },
-})

example/pages/badge/index.json

@@ -1,6 +1,8 @@
 {
   "navigationBarTitleText": "Badge 徽章",
   "usingComponents": {
-    "van-badge": "../../dist/badge/index"
+    "demo-block": "../../components/demo-block/index",
+    "van-badge": "../../dist/badge/index",
+    "van-badge-group": "../../dist/badge-group/index"
   }
 }

example/pages/badge/index.wxml

@@ -1,24 +1,10 @@
-<view class="container">
+<demo-block title="基础用法">
-
+  <view class="container">
-  <view class="demo">
+    <van-badge-group active="0" bind:change="onChange" custom-class="group">
-    <view class="demo__item">
+      <van-badge title="标签名称" />
-      <view class="demo__icon">
+      <van-badge title="标签名称" info="8" />
-        <van-badge>9</van-badge>
+      <van-badge title="标签名称" info="99" />
-      </view>
+      <van-badge title="标签名称" info="199" />
-    </view>
+    </van-badge-group>
-    <view class="demo__item">
-      <view class="demo__icon">
-        <van-badge>19</van-badge>
-      </view>
-    </view>
-    <view class="demo__item">
-      <view class="demo__icon">
-        <van-badge
-          background-color="#4b0"
-          box-shadow="none"
-          font-size="{{ 12 }}"
-        >99+</van-badge>
-      </view>
-    </view>
   </view>
-</view>
+</demo-block>

example/pages/badge/index.wxss

@@ -1,15 +1,10 @@
-.demo {
+.container {
-  padding: 40px 10px;
+  width: auto;
-  display: flex;
+  margin: 0 15px;
-  flex-wrap: wrap;
+  padding: 20px 0;
+  background-color: #fff;
 }
-.demo__item {
+
-  flex: 1;
+.group {
-}
-.demo__icon {
   margin: 0 auto;
-  width: 48px;
-  height: 48px;
-  background: #ddd;
-  border-radius: 4px;
 }

packages/badge-group/index.js

@@ -0,0 +1,61 @@
+const BADGE_PATH = '../badge/index';
+
+Component({
+  externalClasses: ['custom-class'],
+
+  relations: {
+    [BADGE_PATH]: {
+      type: 'descendant',
+
+      linked(target) {
+        this.data.badges.push(target);
+        this.setActive();
+      },
+
+      unlinked(target) {
+        this.data.badges = this.data.badges.filter(item => item !== target);
+        this.setActive();
+      }
+    }
+  },
+
+  properties: {
+    active: {
+      type: Number,
+      value: 0,
+      observer() {
+        this.setActive();
+      }
+    }
+  },
+
+  data: {
+    badges: []
+  },
+
+  attached() {
+    this.currentActive = -1;
+  },
+
+  methods: {
+    setActive(badge) {
+      let { active } = this.data;
+      if (badge) {
+        active = this.data.badges.indexOf(badge);
+      }
+
+      if (active === this.currentActive) {
+        return;
+      }
+
+      if (this.currentActive !== -1) {
+        this.triggerEvent('change', active);
+      }
+
+      this.currentActive = active;
+      this.data.badges.forEach((badge, index) => {
+        badge.setActive(index === active);
+      });
+    }
+  }
+});

packages/badge-group/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/badge-group/index.pcss

@@ -0,0 +1,5 @@
+@import '../helper/index.pcss';
+
+.van-badge-group {
+  width: 85px;
+}

packages/badge-group/index.wxml

@@ -0,0 +1,3 @@
+<view class="van-badge-group van-hairline--top-bottom custom-class">
+  <slot />
+</view>

packages/badge/README.md

@@ -3,45 +3,65 @@
 ### 使用指南
 在 index.json 中引入组件
 ```json
-{
+"usingComponents": {
-  "usingComponents": {
+  "van-badge": "path/to/vant-weapp/dist/badge/index",
-    "van-badge": "path/to/vant-weapp/dist/badge/index"
+  "van-badge-group": "path/to/vant-weapp/dist/badge-group/index"
-  }
 }
 ```
 
 ### 代码演示
 
 #### 基础用法
+
+通过在`van-badge-group`上设置`active`属性来控制选中的`badge`
+
 ```html
-<view class="badge-container">
+<van-badge-group :active="active" bind:change="onChange">
-  <van-badge>10</van-badge>
+  <van-badge title="标签名称" />
-</view>
+  <van-badge title="标签名称" info="8" />
+  <van-badge title="标签名称" info="99" />
+  <van-badge title="标签名称" info="199" />
+</van-badge-group>
 ```
 
-#### 自定义参数
+``` javascript
-```html
+export default {
-<view class="badge-container">
+  data: {
-  <van-badge
+    active: 0
-    color="{{ color }}"
+  },
-    background-color="{{ backgroundColor }}"
+
-    font-size="{{ fontSize }}"
+  methods: {
-    box-shadow="{{ boxShadow }}"
+    onChange(event) {
-  >10</van-badge>
+      wx.showToast({
-</view>
+        icon: 'none',
+        title: `切换至第${event.detail}项`
+      });
+    }
+  }
+};
 ```
 
-```css
+### BadgeGroup API
-.badge-container {
-  width: 100px;
-  height: 100px;
-}
-```
 
-### API
 | 参数 | 说明 | 类型 | 默认值 |
-|-----|-----|-----|-----|
+|-----------|-----------|-----------|-------------|
-| color | 字体颜色 | String | `#fff`
+| active | 选中`badge`的索引 | `String | Number` | `0` |
-| background-color | 背景颜色 | String | `#f44`
+
-| font-size | 字体大小 | Number | 10
+### Badge API
-| box-shadow | 同css box-shadow语法 | String | `0 0 0 2px #fff`
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| title | 内容 | `String` | `''` |
+| info | 提示消息 | `String | Number` | `''` |
+
+### BadgeGroup 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
+
+### Badge 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |

packages/badge/index.js

@@ -1,25 +1,29 @@
-const DEFAULT_COLOR = '#fff';
+const BADGE_GROUP_PATH = '../badge-group/index';
-const DEFAULT_BACKGROUND_COLOR = '#f44';
-const DEFAULT_FONT_SIZE = 10;
-const DEFAULT_BOX_SHADOW = '0 0 0 2px #fff';
 
 Component({
+  externalClasses: ['custom-class'],
+
+  relations: {
+    [BADGE_GROUP_PATH]: {
+      type: 'ancestor'
+    }
+  },
+
   properties: {
-    color: {
+    info: Number,
-      type: String,
+    title: String
-      value: DEFAULT_COLOR
+  },
+
+  methods: {
+    onTap() {
+      const group = this.getRelationNodes(BADGE_GROUP_PATH)[0];
+      if (group) {
+        group.setActive(this);
+      }
     },
-    backgroundColor: {
+
-      type: String,
+    setActive(active) {
-      value: DEFAULT_BACKGROUND_COLOR
+      this.setData({ active });
-    },
-    fontSize: {
-      type: Number,
-      value: DEFAULT_FONT_SIZE
-    },
-    boxShadow: {
-      type: String,
-      value: DEFAULT_BOX_SHADOW
     }
   }
 });

packages/badge/index.pcss

@@ -1,23 +1,55 @@
+@import '../helper/index.pcss';
+
 .van-badge {
-  position: relative;
+  display: block;
-}
+  overflow: hidden;
-.van-badge__text {
+  font-size: 14px;
-  position: absolute;
+  line-height: 1.4;
-  top: -0.8em;
+  user-select: none;
-  right: 0px;
+  color: $gray-darker;
-  height: 1.6em;
+  word-break: break-all;
-  min-width: 1.6em;
-  line-height: 1.6;
-  padding: 0 .4em;
-  font-size: 20px;
-  border-radius: .8em;
-  background: #f44;
-  color: #fff;
-  text-align: center;
-  white-space: nowrap;
-  transform: translateX(50%) scale(0.5);
-  transform-origin: center;
-  z-index: 10;
-  box-shadow: 0 0 0 2px #fff;
   box-sizing: border-box;
+  padding: 20px 12px 20px 9px;
+  background-color: $background-color;
+  border-left: 3px solid transparent;
+
+  &:active {
+    background-color: $active-color;
+  }
+
+  &::after {
+    border-bottom-width: 1px;
+  }
+
+  &--active {
+    font-weight: bold;
+    color: $text-color;
+    border-color: $red;
+
+    &::after {
+      border-right-width: 1px;
+    }
+
+    &,
+    &:active {
+      background-color: $white;
+    }
+  }
+
+  &__info {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    color: $white;
+    font-size: 10px;
+    font-weight: normal;
+    transform: scale(0.8);
+    text-align: center;
+    box-sizing: border-box;
+    padding: 0 6px;
+    min-width: 18px;
+    line-height: 18px;
+    border-radius: 9px;
+    background-color: $red;
+  }
 }

packages/badge/index.wxml

@@ -1,8 +1,4 @@
-<view class="van-badge">
+<view class="van-badge van-hairline custom-class {{ active ? 'van-badge--active' : '' }}" bind:tap="onTap">
-  <view
+  <view wx:if="{{ info }}" class="van-badge__info">{{ info }}</view>
-    class="van-badge__text"
+  {{ title }}
-    style="color: {{ color }}; background-color: {{ backgroundColor }};font-size: {{ fontSize * 2 }}px; box-shadow: {{ boxShadow }};"
-  >
-    <slot></slot>
-  </view>
 </view>