blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

badge

Browse Source
This commit is contained in:
pangxie1991 2017-03-23 20:05:33 +08:00
parent ae79851ee4
commit fed600e1eb
3 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,13 +2,28 @@
### 基础用法 ### 基础用法
<script>
export default {
data() {
return {
activeKey: '2'
};
},
methods: {
onItemClick(e, data) {
this.activeKey = data.mark;
}
}
};
</script>
:::demo 基础用法 :::demo 基础用法
```html ```html
<zan-badge-group active-key="2"> <zan-badge-group :active-key="activeKey">
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge> <zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge mark="1" title="花式寿司" info="99"></zan-badge> <zan-badge mark="1" title="花式寿司" info="99" @click="onItemClick"></zan-badge>
<zan-badge mark="2" title="火炽寿司"></zan-badge> <zan-badge mark="2" title="火炽寿司" @click="onItemClick"></zan-badge>
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge> <zan-badge mark="3" title="手握寿司" info="199" @click="onItemClick"></zan-badge>
</zan-badge-group> </zan-badge-group>
``` ```
::: :::

6
packages/badge/src/badge-group.vue
View File

@ -14,12 +14,6 @@
type: [Number, String], type: [Number, String],
default: 0 default: 0
} }
},
data() {
return {
computedActiveKey: this.activeKey
};
} }
}; };
</script> </script>

14
packages/badge/src/badge.vue
View File

@ -19,21 +19,27 @@ export default {
required: true required: true
}, },
url: { url: {
type: String type: String,
default: 'javascript:;'
}, },
info: { info: {
type: String type: String
} }
}, },
methods: { methods: {
handleClick() { handleClick(e) {
this.$parent.computedActiveKey = this.mark; this.$emit('click', e, {
mark: this.mark,
title: this.title,
url: this.url,
info: this.info
});
} }
}, },
computed: { computed: {
classNames() { classNames() {
return { return {
'is-select': this.mark === this.$parent.computedActiveKey 'is-select': this.mark === this.$parent.activeKey
}; };
} }
} }