mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
45 lines
1.4 KiB
Markdown
45 lines
1.4 KiB
Markdown
## Badge
|
|
|
|
### 基础用法
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
activeKey: '2'
|
|
};
|
|
},
|
|
methods: {
|
|
onItemClick(e, data) {
|
|
this.activeKey = data.mark;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
:::demo 基础用法
|
|
```html
|
|
<zan-badge-group :active-key="activeKey">
|
|
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
|
|
<zan-badge mark="1" title="花式寿司" info="99" @click="onItemClick"></zan-badge>
|
|
<zan-badge mark="2" title="火炽寿司" @click="onItemClick"></zan-badge>
|
|
<zan-badge mark="3" title="手握寿司" info="199" @click="onItemClick"></zan-badge>
|
|
</zan-badge-group>
|
|
```
|
|
:::
|
|
|
|
### z-badge-group API
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
|
|-----------|-----------|-----------|-------------|-------------|
|
|
| active-key | 激活的`badge`的索引 | `string` | `0`但必须子badge里的mark是有`0`位索引 | |
|
|
|
|
|
|
### z-badge API
|
|
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
|
|-----------|-----------|-----------|-------------|-------------|
|
|
| mark | badge的唯一key值 | `string` | `''` | `required` |
|
|
| title | badge的文案标题 | `string` | `''` | `required` |
|
|
| info | 当前badge的提示消息数量 | `string` | `''` | |
|
|
| url | 跳转链接 | `string` | 全连接直接跳转或者hash | |
|