mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
[breaking change] Badge: rewrite
This commit is contained in:
陈嘉涵
parent
0229933e63
commit
5e66f2d5f8
@ -1,11 +1,8 @@
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
},
|
||||
})
|
||||
onChange(event) {
|
||||
wx.showToast({
|
||||
icon: 'none',
|
||||
title: `切换至第${event.detail}项`
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,24 +1,10 @@
|
||||
<view class="container">
|
||||
|
||||
<view class="demo">
|
||||
<view class="demo__item">
|
||||
<view class="demo__icon">
|
||||
<van-badge>9</van-badge>
|
||||
</view>
|
||||
</view>
|
||||
<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>
|
||||
<demo-block title="基础用法">
|
||||
<view class="container">
|
||||
<van-badge-group active="0" bind:change="onChange" custom-class="group">
|
||||
<van-badge title="标签名称" />
|
||||
<van-badge title="标签名称" info="8" />
|
||||
<van-badge title="标签名称" info="99" />
|
||||
<van-badge title="标签名称" info="199" />
|
||||
</van-badge-group>
|
||||
</view>
|
||||
</view>
|
||||
</demo-block>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
61
packages/badge-group/index.js
Normal file
61
packages/badge-group/index.js
Normal file
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
3
packages/badge-group/index.json
Normal file
3
packages/badge-group/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
5
packages/badge-group/index.pcss
Normal file
5
packages/badge-group/index.pcss
Normal file
@ -0,0 +1,5 @@
|
||||
@import '../helper/index.pcss';
|
||||
|
||||
.van-badge-group {
|
||||
width: 85px;
|
||||
}
|
||||
3
packages/badge-group/index.wxml
Normal file
3
packages/badge-group/index.wxml
Normal file
@ -0,0 +1,3 @@
|
||||
<view class="van-badge-group van-hairline--top-bottom custom-class">
|
||||
<slot />
|
||||
</view>
|
||||
@ -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
|
||||
<view class="badge-container">
|
||||
<van-badge>10</van-badge>
|
||||
</view>
|
||||
<van-badge-group :active="active" bind:change="onChange">
|
||||
<van-badge title="标签名称" />
|
||||
<van-badge title="标签名称" info="8" />
|
||||
<van-badge title="标签名称" info="99" />
|
||||
<van-badge title="标签名称" info="199" />
|
||||
</van-badge-group>
|
||||
```
|
||||
|
||||
#### 自定义参数
|
||||
```html
|
||||
<view class="badge-container">
|
||||
<van-badge
|
||||
color="{{ color }}"
|
||||
background-color="{{ backgroundColor }}"
|
||||
font-size="{{ fontSize }}"
|
||||
box-shadow="{{ boxShadow }}"
|
||||
>10</van-badge>
|
||||
</view>
|
||||
``` 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 | 根节点样式类 |
|
||||
|
||||
@ -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 });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,4 @@
|
||||
<view class="van-badge">
|
||||
<view
|
||||
class="van-badge__text"
|
||||
style="color: {{ color }}; background-color: {{ backgroundColor }};font-size: {{ fontSize * 2 }}px; box-shadow: {{ boxShadow }};"
|
||||
>
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view class="van-badge van-hairline custom-class {{ active ? 'van-badge--active' : '' }}" bind:tap="onTap">
|
||||
<view wx:if="{{ info }}" class="van-badge__info">{{ info }}</view>
|
||||
{{ title }}
|
||||
</view>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user