From 329e7513513d0f539b7e11b6978ad03a364b5ae1 Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 2 Sep 2019 19:44:14 +0800 Subject: [PATCH] feat(SidebarItem): add disabled prop (#4325) --- src/sidebar-item/index.js | 9 ++- src/sidebar-item/index.less | 8 ++ src/sidebar/README.md | 1 + src/sidebar/README.zh-CN.md | 1 + src/sidebar/demo/index.vue | 68 +++++++++------- .../test/__snapshots__/demo.spec.js.snap | 78 ++++++++++++------- src/sidebar/test/index.spec.js | 45 +++++++---- src/style/var.less | 7 +- 8 files changed, 144 insertions(+), 73 deletions(-) diff --git a/src/sidebar-item/index.js b/src/sidebar-item/index.js index 596cbc302..16950ed4a 100644 --- a/src/sidebar-item/index.js +++ b/src/sidebar-item/index.js @@ -12,7 +12,8 @@ export default createComponent({ props: { ...routeProps, info: [Number, String], - title: String + title: String, + disabled: Boolean }, computed: { @@ -23,6 +24,10 @@ export default createComponent({ methods: { onClick() { + if (this.disabled) { + return; + } + this.$emit('click', this.index); this.parent.$emit('input', this.index); this.parent.$emit('change', this.index); @@ -33,7 +38,7 @@ export default createComponent({ render() { return (
diff --git a/src/sidebar-item/index.less b/src/sidebar-item/index.less index 101e0f576..e485ba22a 100644 --- a/src/sidebar-item/index.less +++ b/src/sidebar-item/index.less @@ -40,4 +40,12 @@ background-color: @sidebar-selected-background-color; } } + + &--disabled { + color: @sidebar-disabled-text-color; + + &:active { + background-color: @sidebar-background-color; + } + } } diff --git a/src/sidebar/README.md b/src/sidebar/README.md index f758e8572..a0276d388 100644 --- a/src/sidebar/README.md +++ b/src/sidebar/README.md @@ -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 | diff --git a/src/sidebar/README.zh-CN.md b/src/sidebar/README.zh-CN.md index 3184d8c98..14e066ae3 100644 --- a/src/sidebar/README.zh-CN.md +++ b/src/sidebar/README.zh-CN.md @@ -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 | diff --git a/src/sidebar/demo/index.vue b/src/sidebar/demo/index.vue index 077bdf1fc..efef0f0fc 100644 --- a/src/sidebar/demo/index.vue +++ b/src/sidebar/demo/index.vue @@ -1,29 +1,33 @@ @@ -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; + } } diff --git a/src/sidebar/test/__snapshots__/demo.spec.js.snap b/src/sidebar/test/__snapshots__/demo.spec.js.snap index be68884ca..b8a4ba9f2 100644 --- a/src/sidebar/test/__snapshots__/demo.spec.js.snap +++ b/src/sidebar/test/__snapshots__/demo.spec.js.snap @@ -2,32 +2,58 @@ exports[`renders demo correctly 1`] = `
-
-
-
标签名称 - -
- -
标签名称 - -
- -
标签名称 - -
-
-
-
-
-
标签名称
8
-
- -
标签名称
99
-
- -
标签名称
99+
-
-
+
+
+
+

基础用法

+
+
标签名 + +
+ +
标签名 + +
+ +
标签名 + +
+
+
+
+
+
+

显示徽标

+
+
标签名
8
+
+ +
标签名
99
+
+ +
标签名
99+
+
+
+
+
+
+
+

禁用选项

+
+
标签名 + +
+ +
标签名 + +
+ +
标签名 + +
+
+
+
`; diff --git a/src/sidebar/test/index.spec.js b/src/sidebar/test/index.spec.js index 7b1ce7086..64dfb44f9 100644 --- a/src/sidebar/test/index.spec.js +++ b/src/sidebar/test/index.spec.js @@ -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: ` - - Text - + + Text + `, - components: { - Sidebar, - SidebarItem - }, methods: { onClick, onChange @@ -30,15 +30,11 @@ test('click event & change event', () => { test('v-model', () => { const wrapper = mount({ template: ` - - Text - Text - + + Text + Text + `, - 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: ` + + Text + Text + + `, + 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 { diff --git a/src/style/var.less b/src/style/var.less index db016d59b..213b54083 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -15,7 +15,7 @@ // Component Colors @text-color: #323233; @border-color: #ebedf0; -@active-color: #f2f3f5; +@active-color: #040405; @background-color: #f8f8f8; @background-color-light: #fafafa; @@ -479,10 +479,11 @@ // SidebarItem @sidebar-font-size: @font-size-md; @sidebar-line-height: 1.4; -@sidebar-text-color: @gray-darker; +@sidebar-text-color: @text-color; +@sidebar-disabled-text-color: @gray; @sidebar-padding: 20px @padding-sm 20px @padding-xs; @sidebar-active-color: @active-color; -@sidebar-background-color: @background-color; +@sidebar-background-color: @background-color-light; @sidebar-selected-font-weight: 500; @sidebar-selected-text-color: @text-color; @sidebar-selected-border-color: @red;