alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(SidebarItem): add disabled prop (#4325)

Browse Source
This commit is contained in:
neverland
2019-09-02 19:44:14 +08:00
committed by GitHub
parent 52f3de8cf8
commit 329e751351
8 changed files with 144 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sidebar/README.md
+1
View File
@@ -62,6 +62,7 @@ export default {
|------|------|------|------|------|
| title | Content | *string* | `''` | - |
| info | Info Message | *string \| number* | `''` | - |
| disabled | Whether to be disabled | *boolean* | `false` | 2.1.9 |
| url | Link | *string* | - | - |
| to | Target route of the link, same as to of vue-router | *string \| object* | - | 2.0.4 |
| replace | If true, the navigation will not leave a history record | *boolean* | `false` | 2.0.4 |
src/sidebar/README.zh-CN.md
+1
View File
@@ -66,6 +66,7 @@ export default {
|------|------|------|------|------|
| title | 内容 | *string* | `''` | - |
| info | 提示消息 | *string \| number* | `''` | - |
| disabled | 是否禁用该项 | *boolean* | `false` | 2.1.9 |
| url | 跳转链接 | *string* | - | - |
| to | 路由跳转对象，同 vue-router 的 to 属性 | *string \| object* | - | 2.0.4 |
| replace | 跳转时是否替换当前页面历史 | *boolean* | `false` | 2.0.4 |
src/sidebar/demo/index.vue
+41 -27
View File
@@ -1,29 +1,33 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-sidebar v-model="activeKey1">
<van-sidebar-item :title="$t('title')" />
<van-sidebar-item :title="$t('title')" />
<van-sidebar-item :title="$t('title')" />
</van-sidebar>
</demo-block>
<van-grid :column-num="2" :border="false">
<van-grid-item>
<h3 class="demo-sidebar-title">{{ $t('basicUsage') }}</h3>
<van-sidebar v-model="activeKey1">
<van-sidebar-item :title="$t('title')" />
<van-sidebar-item :title="$t('title')" />
<van-sidebar-item :title="$t('title')" />
</van-sidebar>
</van-grid-item>
<demo-block :title="$t('showBadge')">
<van-sidebar v-model="activeKey2">
<van-sidebar-item
:title="$t('title')"
info="8"
/>
<van-sidebar-item
:title="$t('title')"
info="99"
/>
<van-sidebar-item
:title="$t('title')"
info="99+"
/>
</van-sidebar>
</demo-block>
<van-grid-item>
<h3 class="demo-sidebar-title">{{ $t('showBadge') }}</h3>
<van-sidebar v-model="activeKey2">
<van-sidebar-item :title="$t('title')" info="8" />
<van-sidebar-item :title="$t('title')" info="99" />
<van-sidebar-item :title="$t('title')" info="99+" />
</van-sidebar>
</van-grid-item>
<van-grid-item>
<h3 class="demo-sidebar-title">{{ $t('disabled') }}</h3>
<van-sidebar v-model="activeKey3">
<van-sidebar-item :title="$t('title')" />
<van-sidebar-item :title="$t('title')" disabled />
<van-sidebar-item :title="$t('title')" />
</van-sidebar>
</van-grid-item>
</van-grid>
</demo-section>
</template>
@@ -31,18 +35,21 @@
export default {
i18n: {
'zh-CN': {
title: '标签名称',
showBadge: '显示徽标'
title: '标签名',
showBadge: '显示徽标',
disabled: '禁用选项'
},
'en-US': {
showBadge: 'Show Badge'
showBadge: 'Show Badge',
disabled: 'Disabled'
}
},
data() {
return {
activeKey1: 0,
activeKey2: 0
activeKey2: 0,
activeKey3: 0
};
}
};
@@ -57,5 +64,12 @@ export default {
.van-sidebar {
margin-left: @padding-md;
}
&-title {
margin-bottom: 16px;
color: @gray-dark;
font-weight: normal;
font-size: 14px;
}
}
</style>
src/sidebar/test/__snapshots__/demo.spec.js.snap
+52 -26
View File
@@ -2,32 +2,58 @@
exports[`renders demo correctly 1`] = `
<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>
</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>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99</div>
</div>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99+</div>
</div>
</a></div>
<div class="van-grid">
<div class="van-grid-item" style="flex-basis: 50%;">
<div class="van-grid-item__content van-grid-item__content--center">
<h3 class="demo-sidebar-title">基础用法</h3>
<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>
</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-grid-item" style="flex-basis: 50%;">
<div class="van-grid-item__content van-grid-item__content--center">
<h3 class="demo-sidebar-title">显示徽标</h3>
<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>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">99</div>
</div>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">99+</div>
</div>
</a></div>
</div>
</div>
<div class="van-grid-item" style="flex-basis: 50%;">
<div class="van-grid-item__content van-grid-item__content--center">
<h3 class="demo-sidebar-title">禁用选项</h3>
<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>
</a> <a class="van-sidebar-item van-sidebar-item--disabled 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>
</div>
`;
src/sidebar/test/index.spec.js
+30 -15
View File
@@ -1,20 +1,20 @@
import { mount } from '../../../test/utils';
import Vue from 'vue';
import Sidebar from '..';
import SidebarItem from '../../sidebar-item';
Vue.use(Sidebar);
Vue.use(SidebarItem);
test('click event & change event', () => {
const onClick = jest.fn();
const onChange = jest.fn();
const wrapper = mount({
template: `
<sidebar @change="onChange">
<sidebar-item @click="onClick">Text</sidebar-item>
</sidebar>
<van-sidebar @change="onChange">
<van-sidebar-item @click="onClick">Text</van-sidebar-item>
</van-sidebar>
`,
components: {
Sidebar,
SidebarItem
},
methods: {
onClick,
onChange
@@ -30,15 +30,11 @@ test('click event & change event', () => {
test('v-model', () => {
const wrapper = mount({
template: `
<sidebar v-model="active">
<sidebar-item>Text</sidebar-item>
<sidebar-item>Text</sidebar-item>
</sidebar>
<van-sidebar v-model="active">
<van-sidebar-item>Text</van-sidebar-item>
<van-sidebar-item>Text</van-sidebar-item>
</van-sidebar>
`,
components: {
Sidebar,
SidebarItem
},
data() {
return {
active: 0
@@ -50,6 +46,25 @@ test('v-model', () => {
expect(wrapper.vm.active).toEqual(1);
});
test('disabled prop', () => {
const wrapper = mount({
template: `
<van-sidebar v-model="active">
<van-sidebar-item>Text</van-sidebar-item>
<van-sidebar-item disabled>Text</van-sidebar-item>
</van-sidebar>
`,
data() {
return {
active: 0
};
}
});
wrapper.findAll('.van-sidebar-item').at(1).trigger('click');
expect(wrapper.vm.active).toEqual(0);
});
test('without parent', () => {
const consoleError = console.error;
try {