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

[Doc] Sidebar: update demo (#3695)

Browse Source
This commit is contained in:
neverland 2019-06-29 17:07:33 +08:00 committed by GitHub
parent cbda63939d
commit 514e44e621
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/sidebar/README.zh-CN.md
View File

@ -18,9 +18,8 @@ Vue.use(SidebarItem);
```html ```html
<van-sidebar :active-key="activeKey" @change="onChange"> <van-sidebar :active-key="activeKey" @change="onChange">
<van-sidebar-item title="标签名称" /> <van-sidebar-item title="标签名称" />
<van-sidebar-item title="标签名称" info="8" /> <van-sidebar-item title="标签名称" />
<van-sidebar-item title="标签名称" info="99" /> <van-sidebar-item title="标签名称" />
<van-sidebar-item title="标签名称" info="99+" />
</van-sidebar> </van-sidebar>
``` ```
@ -40,6 +39,18 @@ export default {
}; };
``` ```
### 显示徽标
通过`info`属性设置徽标内容
```html
<van-sidebar :active-key="activeKey" @change="onChange">
<van-sidebar-item title="标签名称" info="8" />
<van-sidebar-item title="标签名称" info="99" />
<van-sidebar-item title="标签名称" info="99+" />
</van-sidebar>
```
## API ## API
### Sidebar Props ### Sidebar Props

27
src/sidebar/demo/index.vue
View File

@ -2,10 +2,20 @@
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-sidebar <van-sidebar
:active-key="activeKey" :active-key="activeKey1"
@change="onChange" @change="onChange('activeKey1', $event)"
> >
<van-sidebar-item :title="$t('title')" /> <van-sidebar-item :title="$t('title')" />
<van-sidebar-item :title="$t('title')" />
<van-sidebar-item :title="$t('title')" />
</van-sidebar>
</demo-block>
<demo-block :title="$t('showBadge')">
<van-sidebar
:active-key="activeKey2"
@change="onChange('activeKey2', $event)"
>
<van-sidebar-item <van-sidebar-item
:title="$t('title')" :title="$t('title')"
info="8" info="8"
@ -27,19 +37,24 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
title: '标签名称' title: '标签名称',
showBadge: '显示徽标'
},
'en-US': {
showBadge: 'Show Badge'
} }
}, },
data() { data() {
return { return {
activeKey: 0 activeKey1: 0,
activeKey2: 0
}; };
}, },
methods: { methods: {
onChange(key) { onChange(name, key) {
this.activeKey = key; this[name] = key;
} }
} }
}; };

11
src/sidebar/test/__snapshots__/demo.spec.js.snap
View File

@ -8,6 +8,17 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
</div> </div>
</a> <a class="van-sidebar-item van-hairline"> </a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名称
<!---->
</div>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名称
<!---->
</div>
</a></div>
</div>
<div>
<div class="van-sidebar van-hairline--top-bottom"><a class="van-sidebar-item van-sidebar-item--select van-hairline">
<div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">8</div> <div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">8</div>
</div> </div>
</a> <a class="van-sidebar-item van-hairline"> </a> <a class="van-sidebar-item van-hairline">