From 2cc8f2ae5edc65246540b987241fd092c21707bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=95=8F?= Date: Tue, 11 Jul 2017 14:35:39 +0800 Subject: [PATCH] =?UTF-8?q?tabs=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E6=BB=91=E5=8A=A8=20(#52)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/examples-dist/tab.vue | 22 ++-- docs/examples-docs/tab.md | 27 +++- packages/dialog/src/dialog.js | 1 + packages/image-preview/src/image-preview.js | 2 + packages/image-preview/src/image-preview.vue | 2 + packages/picker/src/picker-column.vue | 1 + packages/tab/src/swipe.js | 46 +++++++ packages/tab/src/tabs.vue | 129 +++++++++++++++++-- packages/vant-css/src/tab.css | 49 ++++--- test/unit/components/more-tabs.vue | 28 ++++ test/unit/components/tabs.vue | 1 - test/unit/specs/dialog.spec.js | 3 +- test/unit/specs/image-preview.spec.js | 2 + test/unit/specs/tabs.spec.js | 72 +++++++++++ test/unit/specs/tag.spec.js | 8 -- 15 files changed, 331 insertions(+), 62 deletions(-) create mode 100644 packages/tab/src/swipe.js create mode 100644 test/unit/components/more-tabs.vue diff --git a/docs/examples-dist/tab.vue b/docs/examples-dist/tab.vue index 962d70a10..fa8534e5d 100644 --- a/docs/examples-dist/tab.vue +++ b/docs/examples-dist/tab.vue @@ -4,7 +4,6 @@ 内容二 内容三 内容四 - 内容五 @@ -13,7 +12,6 @@ 内容二 内容三 内容四 - 内容五 @@ -23,13 +21,24 @@ 内容三 - + - 内容一 - 内容二 + 内容一 + 内容二 内容三 内容四 内容五 + 内容六 + 内容七 + 内容八 + + + + + 内容一 + 内容二 + 内容三 + 内容四 @@ -40,7 +49,6 @@ 内容二 内容三 内容四 - 内容五 @@ -49,7 +57,6 @@ 内容二 内容三 内容四 - 内容五 @@ -60,7 +67,6 @@ 内容二 内容三 内容四 - 内容五 diff --git a/docs/examples-docs/tab.md b/docs/examples-docs/tab.md index c8ba3ba11..a9e4e687e 100644 --- a/docs/examples-docs/tab.md +++ b/docs/examples-docs/tab.md @@ -97,7 +97,6 @@ export default { 内容二 内容三 内容四 - 内容五 ``` ::: @@ -113,7 +112,6 @@ export default { 内容二 内容三 内容四 - 内容五 ``` ::: @@ -132,6 +130,25 @@ export default { ``` ::: +#### 多于4个tab时 + +多于4个tab时，可以横向滚动tab。 + +:::demo 多于4个tab时 +```html + + 内容一 + 内容二 + 内容三 + 内容四 + 内容五 + 内容六 + 内容七 + 内容八 + +``` +::: + #### 禁用tab 在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。 @@ -139,11 +156,10 @@ export default { :::demo 禁用tab ```html - 内容一 + 内容一 内容二 内容三 内容四 - 内容五 diff --git a/packages/vant-css/src/tab.css b/packages/vant-css/src/tab.css index 2fe518cfe..f7ace23fe 100644 --- a/packages/vant-css/src/tab.css +++ b/packages/vant-css/src/tab.css @@ -5,27 +5,20 @@ @b tabs { position: relative; - @m col-2 { - .van-tab { - width: 50%; - } + @e nav-wrap { + overflow: hidden; } - @m col-3 { - .van-tab { - width: 33.33333333333333%; - } - } + @e swipe { + user-select: none; + transition: transform ease .3s; - @m col-4 { .van-tab { - width: 25%; + flex: 0 0 22%; } - } - @m col-5 { - .van-tab { - width: 20%; + .van-tabs__nav { + overflow: visible; } } @@ -33,16 +26,15 @@ overflow: hidden; transition: transform .5s cubic-bezier(.645, .045, .355, 1); position: relative; + display: flex; @m line { height: 44px; - background-color: $c-white; - &::after { - @mixin border-retina (top); - @mixin border-retina (bottom); - } - @b tabs-nav-bar { - display: block; + + .van-tab { + &::after { + @mixin border-retina (top, bottom); + } } } @@ -55,14 +47,16 @@ overflow: hidden; .van-tab { - color: #666666; + color: #666; line-height: 28px; - border-right: 1px solid #666666; + border-right: 1px solid #666; + &:last-child { border-right: none; } + &.van-tab--active { - background-color: #666666; + background-color: #666; color: $c-white; } } @@ -82,13 +76,16 @@ } @b tab { + position: relative; color: $c-black; + background-color: $c-white; font-size: 14px; line-height: 44px; box-sizing: border-box; cursor: pointer; text-align: center; - float: left; + flex: 1; + -webkit-tap-highlight-color: rgba(0,0,0,0); @m active { color: #FF4444; diff --git a/test/unit/components/more-tabs.vue b/test/unit/components/more-tabs.vue new file mode 100644 index 000000000..6313f92ca --- /dev/null +++ b/test/unit/components/more-tabs.vue @@ -0,0 +1,28 @@ + + + diff --git a/test/unit/components/tabs.vue b/test/unit/components/tabs.vue index df871ba68..a63a15b0d 100644 --- a/test/unit/components/tabs.vue +++ b/test/unit/components/tabs.vue @@ -4,7 +4,6 @@ 内容二 内容三 内容四 - 内容五 diff --git a/test/unit/specs/dialog.spec.js b/test/unit/specs/dialog.spec.js index 2fad23a13..aa006b88f 100644 --- a/test/unit/specs/dialog.spec.js +++ b/test/unit/specs/dialog.spec.js @@ -1,4 +1,5 @@ import Dialog from 'packages/dialog'; +import Vue from 'vue'; describe('Dialog', () => { afterEach(() => { @@ -51,6 +52,6 @@ describe('Dialog', () => { document.querySelector('.van-dialog__cancel').click(); expect(dialogAction).to.equal('cancel'); done(); - }, 50); + }, 500); }); }); diff --git a/test/unit/specs/image-preview.spec.js b/test/unit/specs/image-preview.spec.js index 6475f4b81..d6ad06931 100644 --- a/test/unit/specs/image-preview.spec.js +++ b/test/unit/specs/image-preview.spec.js @@ -16,6 +16,7 @@ describe('ImagePreview', () => { it('create a image preview', (done) => { ImagePreview([ + 'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png', 'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg', 'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg' ]); @@ -40,6 +41,7 @@ describe('ImagePreview', () => { document.body.style.overflow = 'hidden'; ImagePreview([ + 'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png', 'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg', 'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg' ]); diff --git a/test/unit/specs/tabs.spec.js b/test/unit/specs/tabs.spec.js index 377ada337..eb6252a12 100644 --- a/test/unit/specs/tabs.spec.js +++ b/test/unit/specs/tabs.spec.js @@ -1,6 +1,7 @@ import Tabs from 'packages/tabs'; import { mount } from 'avoriaz'; import TabsTestComponent from '../components/tabs'; +import MoreTabsTestComponent from '../components/more-tabs'; describe('Tabs', () => { let wrapper; @@ -74,4 +75,75 @@ describe('Tabs', () => { expect(wrapper.style.transitionDuration != '').to.be.true; }); + + it('create a tabs greater then 4', (done) => { + wrapper = mount(MoreTabsTestComponent, { + attachToDocument: true + }); + + wrapper.vm.$nextTick(() => { + const nTab = wrapper.find('.van-tab')[4]; + nTab.trigger('click'); + done(); + }); + }); + + it('create a tabs greater then 4 then click last tab', (done) => { + wrapper = mount(MoreTabsTestComponent, { + attachToDocument: true, + propsData: { + active: 7 + } + }); + + wrapper.vm.$nextTick(() => { + const nTab = wrapper.find('.van-tab')[6]; + nTab.trigger('click'); + done(); + }); + }); + + it('test swipe', (done) => { + wrapper = mount(MoreTabsTestComponent, { + attachToDocument: true + }); + + setTimeout(() => { + const nSwipe = wrapper.find('.van-tabs__swipe')[0]; + + const eventMouseObject = new window.Event('mousedown'); + eventMouseObject.pageX = 200; + nSwipe.element.dispatchEvent(eventMouseObject); + + const eventTouchObject = new window.Event('touchstart'); + eventTouchObject.changedTouches = [{ pageX: 200 }]; + nSwipe.element.dispatchEvent(eventTouchObject); + }, 500); + + setTimeout(() => { + const nSwipe = wrapper.find('.van-tabs__swipe')[0]; + + const eventMouseMoveObject = new window.Event('mousemove'); + eventMouseMoveObject.pageX = 0; + document.dispatchEvent(eventMouseMoveObject); + + const eventObject = new window.Event('touchmove'); + eventObject.changedTouches = [{ pageX: 0 }]; + nSwipe.element.dispatchEvent(eventObject); + + // 结束滑动 + const eventMouseUpObject = new window.Event('mouseup'); + document.dispatchEvent(eventMouseUpObject); + const eventEndObject = new window.Event('touchend'); + eventEndObject.changedTouches = [{}]; + nSwipe.element.dispatchEvent(eventEndObject); + }, 1000); + + setTimeout(() => { + const nItem = wrapper.find('.van-tab')[0]; + expect(nItem.hasClass('van-tab--active')).to.be.true; + + done(); + }, 1200); + }); }); diff --git a/test/unit/specs/tag.spec.js b/test/unit/specs/tag.spec.js index c077e93ab..984beab2e 100644 --- a/test/unit/specs/tag.spec.js +++ b/test/unit/specs/tag.spec.js @@ -18,12 +18,4 @@ describe('Tag', () => { } }) }); - - it('create with wrong typeProps', () => { - wrapper = mount(Tag, { - propsData: { - type: 'wrong' - } - }) - }); });