mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] Sidebar: support use v-model to bind active key (#3698)
This commit is contained in:
neverland
GitHub
parent
531fa6681e
commit
a7b4b4c219
@ -23,6 +23,7 @@ export default createComponent({
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click', this.index);
|
||||
this.parent.$emit('input', this.index);
|
||||
this.parent.$emit('change', this.index);
|
||||
route(this.$router, this);
|
||||
}
|
||||
|
||||
@ -13,14 +13,11 @@ Vue.use(SidebarItem);
|
||||
|
||||
### Basic Usage
|
||||
|
||||
Use `active-key` prop to set index of chosen item
|
||||
|
||||
```html
|
||||
<van-sidebar :active-key="activeKey" @change="onChange">
|
||||
<van-sidebar v-model="activeKey">
|
||||
<van-sidebar-item title="Title" />
|
||||
<van-sidebar-item title="Title" />
|
||||
<van-sidebar-item title="Title" />
|
||||
<van-sidebar-item title="Title" info="8" />
|
||||
<van-sidebar-item title="Title" info="99" />
|
||||
<van-sidebar-item title="Title" info="99+" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
@ -30,29 +27,33 @@ export default {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Show Badge
|
||||
|
||||
```html
|
||||
<van-sidebar v-model="activeKey">
|
||||
<van-sidebar-item title="Title" info="8" />
|
||||
<van-sidebar-item title="Title" info="99" />
|
||||
<van-sidebar-item title="Title" info="99+" />
|
||||
</van-sidebar>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Sidebar Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| active-key | Index of chosen item | `String | Number` | `0` |
|
||||
| v-model | Index of chosen item | `String | Number` | `0` |
|
||||
|
||||
### Sidebar Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| change | Triggered when item changed | key: index of current item |
|
||||
| change | Triggered when item changed | index: index of current item |
|
||||
|
||||
### SidebarItem Props
|
||||
|
||||
@ -66,4 +67,4 @@ export default {
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click item | key: index of current item |
|
||||
| click | Triggered when click item | index: index of current item |
|
||||
|
||||
@ -13,10 +13,10 @@ Vue.use(SidebarItem);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过在`van-sidebar`上设置`active-key`属性来控制选中项
|
||||
通过`v-model`绑定当前选中项的索引
|
||||
|
||||
```html
|
||||
<van-sidebar :active-key="activeKey" @change="onChange">
|
||||
<van-sidebar v-model="activeKey">
|
||||
<van-sidebar-item title="标签名称" />
|
||||
<van-sidebar-item title="标签名称" />
|
||||
<van-sidebar-item title="标签名称" />
|
||||
@ -29,12 +29,6 @@ export default {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -44,7 +38,7 @@ export default {
|
||||
通过`info`属性设置徽标内容
|
||||
|
||||
```html
|
||||
<van-sidebar :active-key="activeKey" @change="onChange">
|
||||
<van-sidebar v-model="activeKey">
|
||||
<van-sidebar-item title="标签名称" info="8" />
|
||||
<van-sidebar-item title="标签名称" info="99" />
|
||||
<van-sidebar-item title="标签名称" info="99+" />
|
||||
@ -57,13 +51,13 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| active-key | 当前导航项的索引 | `String | Number` | `0` | - |
|
||||
| v-model | 当前导航项的索引 | `String | Number` | `0` | 2.0.4 |
|
||||
|
||||
### Sidebar Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| change | 切换当前导航项时触发 | key: 当前导航项的索引 |
|
||||
| change | 切换导航项时触发 | index: 当前导航项的索引 |
|
||||
|
||||
### SidebarItem Props
|
||||
|
||||
@ -79,4 +73,4 @@ export default {
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | key: 当前导航项的索引 |
|
||||
| click | 点击时触发 | index: 当前导航项的索引 |
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-sidebar
|
||||
:active-key="activeKey1"
|
||||
@change="onChange('activeKey1', $event)"
|
||||
>
|
||||
<van-sidebar v-model="activeKey1">
|
||||
<van-sidebar-item :title="$t('title')" />
|
||||
<van-sidebar-item :title="$t('title')" />
|
||||
<van-sidebar-item :title="$t('title')" />
|
||||
@ -12,10 +9,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showBadge')">
|
||||
<van-sidebar
|
||||
:active-key="activeKey2"
|
||||
@change="onChange('activeKey2', $event)"
|
||||
>
|
||||
<van-sidebar v-model="activeKey2">
|
||||
<van-sidebar-item
|
||||
:title="$t('title')"
|
||||
info="8"
|
||||
@ -50,12 +44,6 @@ export default {
|
||||
activeKey1: 0,
|
||||
activeKey2: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(name, key) {
|
||||
this[name] = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -64,20 +52,10 @@ export default {
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-sidebar {
|
||||
background-color: @white;
|
||||
|
||||
.van-sidebar {
|
||||
width: auto;
|
||||
margin: 0 15px;
|
||||
padding: 20px 0;
|
||||
background-color: @white;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.van-sidebar-item {
|
||||
width: 85px;
|
||||
margin: 0 auto;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,6 +6,10 @@ const [createComponent, bem] = createNamespace('sidebar');
|
||||
export default createComponent({
|
||||
mixins: [ParentMixin('vanSidebar')],
|
||||
|
||||
model: {
|
||||
prop: 'activeKey'
|
||||
},
|
||||
|
||||
props: {
|
||||
activeKey: {
|
||||
type: [Number, String],
|
||||
|
||||
@ -27,6 +27,29 @@ test('click event & change event', () => {
|
||||
wrapper.vm.$destroy();
|
||||
});
|
||||
|
||||
test('v-model', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<sidebar v-model="active">
|
||||
<sidebar-item>Text</sidebar-item>
|
||||
<sidebar-item>Text</sidebar-item>
|
||||
</sidebar>
|
||||
`,
|
||||
components: {
|
||||
Sidebar,
|
||||
SidebarItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.findAll('.van-sidebar-item').at(1).trigger('click');
|
||||
expect(wrapper.vm.active).toEqual(1);
|
||||
});
|
||||
|
||||
test('without parent', () => {
|
||||
const consoleError = console.error;
|
||||
try {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user