From 5e66f2d5f8e5afbc2458a29366580914f5bdd3d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Thu, 2 Aug 2018 14:40:54 +0800 Subject: [PATCH] [breaking change] Badge: rewrite --- example/pages/badge/index.js | 17 +++---- example/pages/badge/index.json | 4 +- example/pages/badge/index.wxml | 32 ++++---------- example/pages/badge/index.wxss | 19 +++----- packages/badge-group/index.js | 61 ++++++++++++++++++++++++++ packages/badge-group/index.json | 3 ++ packages/badge-group/index.pcss | 5 +++ packages/badge-group/index.wxml | 3 ++ packages/badge/README.md | 78 +++++++++++++++++++++------------ packages/badge/index.js | 40 +++++++++-------- packages/badge/index.pcss | 72 +++++++++++++++++++++--------- packages/badge/index.wxml | 10 ++--- 12 files changed, 224 insertions(+), 120 deletions(-) create mode 100644 packages/badge-group/index.js create mode 100644 packages/badge-group/index.json create mode 100644 packages/badge-group/index.pcss create mode 100644 packages/badge-group/index.wxml diff --git a/example/pages/badge/index.js b/example/pages/badge/index.js index 454020c0..d908cafb 100644 --- a/example/pages/badge/index.js +++ b/example/pages/badge/index.js @@ -1,11 +1,8 @@ Page({ - data: { - }, - - onLoad: function () { - - }, - - onShow: function() { - }, -}) + onChange(event) { + wx.showToast({ + icon: 'none', + title: `切换至第${event.detail}项` + }); + } +}); diff --git a/example/pages/badge/index.json b/example/pages/badge/index.json index d1aeb551..0d3eeb34 100644 --- a/example/pages/badge/index.json +++ b/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" } } diff --git a/example/pages/badge/index.wxml b/example/pages/badge/index.wxml index 1ad6e6c9..b85befaf 100644 --- a/example/pages/badge/index.wxml +++ b/example/pages/badge/index.wxml @@ -1,24 +1,10 @@ - - - - - - 9 - - - - - 19 - - - - - 99+ - - + + + + + + + + - + diff --git a/example/pages/badge/index.wxss b/example/pages/badge/index.wxss index 9e5458b5..4d7f0e2b 100644 --- a/example/pages/badge/index.wxss +++ b/example/pages/badge/index.wxss @@ -1,15 +1,10 @@ -.demo { - padding: 40px 10px; - display: flex; - flex-wrap: wrap; +.container { + width: auto; + margin: 0 15px; + padding: 20px 0; + background-color: #fff; } -.demo__item { - flex: 1; -} -.demo__icon { + +.group { margin: 0 auto; - width: 48px; - height: 48px; - background: #ddd; - border-radius: 4px; } diff --git a/packages/badge-group/index.js b/packages/badge-group/index.js new file mode 100644 index 00000000..6f9cda68 --- /dev/null +++ b/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); + }); + } + } +}); diff --git a/packages/badge-group/index.json b/packages/badge-group/index.json new file mode 100644 index 00000000..467ce294 --- /dev/null +++ b/packages/badge-group/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/packages/badge-group/index.pcss b/packages/badge-group/index.pcss new file mode 100644 index 00000000..2a1b0815 --- /dev/null +++ b/packages/badge-group/index.pcss @@ -0,0 +1,5 @@ +@import '../helper/index.pcss'; + +.van-badge-group { + width: 85px; +} diff --git a/packages/badge-group/index.wxml b/packages/badge-group/index.wxml new file mode 100644 index 00000000..04a0c8f3 --- /dev/null +++ b/packages/badge-group/index.wxml @@ -0,0 +1,3 @@ + + + diff --git a/packages/badge/README.md b/packages/badge/README.md index 1003af87..9a4fa0bf 100644 --- a/packages/badge/README.md +++ b/packages/badge/README.md @@ -3,45 +3,65 @@ ### 使用指南 在 index.json 中引入组件 ```json -{ - "usingComponents": { - "van-badge": "path/to/vant-weapp/dist/badge/index" - } +"usingComponents": { + "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 - - 10 - + + + + + + ``` -#### 自定义参数 -```html - - 10 - +``` javascript +export default { + data: { + active: 0 + }, + + methods: { + onChange(event) { + wx.showToast({ + icon: 'none', + title: `切换至第${event.detail}项` + }); + } + } +}; ``` -```css -.badge-container { - width: 100px; - height: 100px; -} -``` +### BadgeGroup API -### API | 参数 | 说明 | 类型 | 默认值 | -|-----|-----|-----|-----| -| color | 字体颜色 | String | `#fff` -| background-color | 背景颜色 | String | `#f44` -| font-size | 字体大小 | Number | 10 -| box-shadow | 同css box-shadow语法 | String | `0 0 0 2px #fff` +|-----------|-----------|-----------|-------------| +| active | 选中`badge`的索引 | `String | Number` | `0` | + +### Badge API + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| title | 内容 | `String` | `''` | +| info | 提示消息 | `String | Number` | `''` | + +### BadgeGroup 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| custom-class | 根节点样式类 | + +### Badge 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| custom-class | 根节点样式类 | diff --git a/packages/badge/index.js b/packages/badge/index.js index c4c7f361..eeb11825 100644 --- a/packages/badge/index.js +++ b/packages/badge/index.js @@ -1,25 +1,29 @@ -const DEFAULT_COLOR = '#fff'; -const DEFAULT_BACKGROUND_COLOR = '#f44'; -const DEFAULT_FONT_SIZE = 10; -const DEFAULT_BOX_SHADOW = '0 0 0 2px #fff'; +const BADGE_GROUP_PATH = '../badge-group/index'; Component({ + externalClasses: ['custom-class'], + + relations: { + [BADGE_GROUP_PATH]: { + type: 'ancestor' + } + }, + properties: { - color: { - type: String, - value: DEFAULT_COLOR + info: Number, + title: String + }, + + methods: { + onTap() { + const group = this.getRelationNodes(BADGE_GROUP_PATH)[0]; + if (group) { + group.setActive(this); + } }, - backgroundColor: { - type: String, - value: DEFAULT_BACKGROUND_COLOR - }, - fontSize: { - type: Number, - value: DEFAULT_FONT_SIZE - }, - boxShadow: { - type: String, - value: DEFAULT_BOX_SHADOW + + setActive(active) { + this.setData({ active }); } } }); diff --git a/packages/badge/index.pcss b/packages/badge/index.pcss index 24b767dc..3b0d7eed 100644 --- a/packages/badge/index.pcss +++ b/packages/badge/index.pcss @@ -1,23 +1,55 @@ +@import '../helper/index.pcss'; + .van-badge { - position: relative; -} -.van-badge__text { - position: absolute; - top: -0.8em; - right: 0px; - height: 1.6em; - 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; + display: block; + overflow: hidden; + font-size: 14px; + line-height: 1.4; + user-select: none; + color: $gray-darker; + word-break: break-all; 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; + } } diff --git a/packages/badge/index.wxml b/packages/badge/index.wxml index 31b18476..2630776c 100644 --- a/packages/badge/index.wxml +++ b/packages/badge/index.wxml @@ -1,8 +1,4 @@ - - - - + + {{ info }} + {{ title }}