blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-25 10:56:35 +08:00
Code Issues Projects Releases Wiki Activity

Badge: update document

Browse Source
This commit is contained in:
陈嘉涵 2017-08-31 11:29:47 +08:00
parent 1f645422ca
commit aff5da68e4
2 changed files with 56 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
docs/examples-docs/badge.md
View File

@ -1,11 +1,18 @@
<style> <style>
.demo-badge { .demo-badge {
.badge-group-wrapper { .van-badge-group {
padding: 30px 20px; width: auto;
margin: 0 15px;
padding: 20px 0;
background-color: #fff; background-color: #fff;
&::after {
display: none;
}
} }
.van-badge-group { .van-badge {
width: 85px;
margin: 0 auto; margin: 0 auto;
} }
} }
@ -15,12 +22,12 @@
export default { export default {
data() { data() {
return { return {
activeKey: '2' activeKey: 0
}; };
}, },
methods: { methods: {
onItemClick(e, data) { onClick(key) {
this.activeKey = data.mark; this.activeKey = key;
} }
} }
}; };
@ -39,48 +46,44 @@ Vue.component(Badge.name, Badge);
#### 基础用法 #### 基础用法
默认情况下激活第一个`badge`。 通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge`
:::demo 基础用法 :::demo 基础用法
```html ```html
<div class="badge-group-wrapper"> <van-badge-group :active-key="activeKey">
<van-badge-group> <van-badge title="热销榜" @click="onClick"></van-badge>
<van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge> <van-badge title="花式寿司" @click="onClick" info="8"></van-badge>
<van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge> <van-badge title="火炽寿司" @click="onClick" info="99"></van-badge>
<van-badge title="火炽寿司" @click="onItemClick"></van-badge> <van-badge title="手握寿司" @click="onClick" info="199"></van-badge>
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
</van-badge-group> </van-badge-group>
</div> ```
``` javascript
export default {
data() {
return {
activeKey: 0
};
},
methods: {
onClick(key) {
this.activeKey = key;
}
}
};
``` ```
::: :::
#### 选中某个badge
如果想默认选中某个`badge`，你可以在`van-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。 ### BadgeGroup API
:::demo 选中某个badge | 参数 | 说明 | 类型 | 默认值 | 可选值 |
```html
<div class="badge-group-wrapper">
<van-badge-group :active-key="2">
<van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
<van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
<van-badge title="火炽寿司" @click="onItemClick"></van-badge>
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
</van-badge-group>
</div>
```
:::
### z-badge-group API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| active-key | 激活的`badge`的索引 | `string` | `0`但必须子badge里的mark是有`0`位索引 | | | active-key | 选中`badge`的索引 | `String | Number` | `0` | - |
### Badge API
### z-badge API | 参数 | 说明 | 类型 | 默认值 | 可选值 |
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| title | badge的文案标题 | `string` | `''` | `required` | | title | 内容 | `String` | `''` | - |
| info | 当前badge的提示消息 | `string` | `''` | | | info | 提示消息 | `String` | `''` | - |
| url | 跳转链接 | `string` | 链接直接跳转或者hash | | | url | 跳转链接 | `String` | - | - |

14
packages/badge/index.vue
View File

@ -1,9 +1,5 @@
<template> <template>
<a <a :class="['van-badge', { 'van-badge--select': isSelect }]" :href="url" @click="onClick">
class="van-badge"
:class="{ 'van-badge--select': isSelect }"
:href="url"
@click="handleClick">
<div class="van-badge__active"></div> <div class="van-badge__active"></div>
<div v-if="info" class="van-badge__info">{{ info }}</div> <div v-if="info" class="van-badge__info">{{ info }}</div>
{{ title }} {{ title }}
@ -40,12 +36,8 @@ export default {
}, },
methods: { methods: {
handleClick(e) { onClick() {
this.$emit('click', e, { this.$emit('click', this.$parent.badges.indexOf(this));
title: this.title,
url: this.url,
info: this.info
});
} }
} }
}; };