mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
done
This commit is contained in:
parent
ba405b723b
commit
0abb184056
@ -4,11 +4,26 @@
|
|||||||
|
|
||||||
:::demo 样例代码
|
:::demo 样例代码
|
||||||
```html
|
```html
|
||||||
<z-badge-group>
|
<z-badge-group active-key="2">
|
||||||
<z-badge badge-key="0" title="热销榜" info="8"></z-badge>
|
<z-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></z-badge>
|
||||||
<z-badge badge-key="1" title="花式寿司" info="99"></z-badge>
|
<z-badge mark="1" title="花式寿司" info="99"></z-badge>
|
||||||
<z-badge badge-key="2" title="火炽寿司"></z-badge>
|
<z-badge mark="2" title="火炽寿司"></z-badge>
|
||||||
<z-badge badge-key="3" title="手握寿司" info="199"></z-badge>
|
<z-badge mark="3" title="手握寿司" info="199"></z-badge>
|
||||||
</z-badge-group>
|
</z-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 | |
|
||||||
|
@ -1,34 +0,0 @@
|
|||||||
function broadcast(componentName, eventName, ...params) {
|
|
||||||
this.$children.forEach(child => {
|
|
||||||
var name = child.$options.componentName;
|
|
||||||
|
|
||||||
if (name === componentName) {
|
|
||||||
child.$emit.apply(child, [eventName].concat(params));
|
|
||||||
} else {
|
|
||||||
broadcast.apply(child, [componentName, eventName].concat(params));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
$dispatch(componentName, eventName, ...params) {
|
|
||||||
|
|
||||||
var parent = this.$parent || this.$root;
|
|
||||||
var name = parent.$options.componentName;
|
|
||||||
|
|
||||||
while (parent && (!name || name !== componentName)) {
|
|
||||||
parent = parent.$parent;
|
|
||||||
|
|
||||||
if (parent) {
|
|
||||||
name = parent.$options.componentName;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (parent) {
|
|
||||||
parent.$emit.apply(parent, [eventName].concat(params));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
$broadcast(componentName, eventName, ...params) {
|
|
||||||
broadcast.call(this, componentName, eventName, ...params);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
@ -7,9 +7,16 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'z-badge-group',
|
name: 'z-badge-group',
|
||||||
|
props: {
|
||||||
|
// 当前激活 tab 面板的 key
|
||||||
|
activeKey: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
activeKey: '0'
|
computedActiveKey: this.activeKey
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
export default {
|
export default {
|
||||||
name: 'z-badge',
|
name: 'z-badge',
|
||||||
props: {
|
props: {
|
||||||
badgeKey: {
|
mark: {
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
@ -18,23 +18,17 @@ export default {
|
|||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
url: String,
|
url: String,
|
||||||
value: String,
|
|
||||||
info: String
|
info: String
|
||||||
},
|
},
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
isSelected: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
handleClick() {
|
handleClick() {
|
||||||
this.$parent.activeKey = this.badgeKey;
|
this.$parent.computedActiveKey = this.mark;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
classNames () {
|
classNames () {
|
||||||
return {
|
return {
|
||||||
'is-select': this.badgeKey == this.$parent.activeKey ? true : false
|
'is-select': this.mark == this.$parent.computedActiveKey ? true : false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user