diff --git a/docs/examples-dist/steps.vue b/docs/examples-dist/steps.vue index e2317d29d..735c128fb 100644 --- a/docs/examples-dist/steps.vue +++ b/docs/examples-dist/steps.vue @@ -18,6 +18,22 @@ 交易完成 + + + +

【城市】最新的物流状态之类的表述哈哈哈哈

+

2016-07-12 12:12:12

+ + +

【城市】已经过了的物流状态我是折行我是折行我是折行联系电话：158630099999

+

2016-07-12 12:12:12

+ + +

未发货

+

2016-07-12 12:12:12

+ + + 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/card.md b/docs/examples-docs/card.md index ac01a52ae..82a0a1b8a 100644 --- a/docs/examples-docs/card.md +++ b/docs/examples-docs/card.md @@ -86,4 +86,5 @@ export default { | title | 自定义标题 | | desc | 自定义描述 | | tags | 自定义tags | +| thumb | 自定义thumb | | footer | 自定义footer | diff --git a/docs/examples-docs/steps.md b/docs/examples-docs/steps.md index eebe46708..6fa81f664 100644 --- a/docs/examples-docs/steps.md +++ b/docs/examples-docs/steps.md @@ -111,6 +111,29 @@ export default { ``` ::: +#### 竖式步骤条 + +可以通过设置`direction`属性来改变步骤条的显示方式，可选值有`vertical/horizontal`。 + +:::demo 只显示步骤条 +```html + + +

【城市】最新的物流状态之类的表述哈哈哈哈

+

2016-07-12 12:12:12

+ + +

【城市】已经过了的物流状态我是折行我是折行我是折行联系电话：158630099999

+

2016-07-12 12:12:12

+ + +

未发货

+

2016-07-12 12:12:12

+ + +``` +::: + ### 高级用法 可以使用具名`slot`增加自定义内容，其中包含`icon`和`message-extra`。 @@ -137,6 +160,8 @@ export default { | iconClass | 当前步骤栏为icon添加的类 | `string` | | | | title | 当前步骤从标题 | `string` | | | | description | 当前步骤描述 | `string` | | | +| direction | 显示方向 | `string` | `horizontal` | `vertical/horizontal` | +| activeColor | `active`状态时的颜色 | `string` | `#06bf04` | | ### Steps Slot 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/tab/src/swipe.js b/packages/tab/src/swipe.js new file mode 100644 index 000000000..5b22acdf4 --- /dev/null +++ b/packages/tab/src/swipe.js @@ -0,0 +1,46 @@ +import Vue from 'vue'; + +let isSwiping = false; + +const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window; + +export default function(element, options) { + const moveFn = function(event) { + if (options.drag) { + options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event); + } + }; + + const endFn = function(event) { + if (!supportTouch) { + document.removeEventListener('mousemove', moveFn); + document.removeEventListener('mouseup', endFn); + } + + isSwiping = false; + + if (options.end) { + options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event); + } + }; + + element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) { + if (isSwiping) return; + + if (!supportTouch) { + document.addEventListener('mousemove', moveFn); + document.addEventListener('mouseup', endFn); + } + isSwiping = true; + + if (options.start) { + options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event); + } + }); + + if (supportTouch) { + element.addEventListener('touchmove', moveFn); + element.addEventListener('touchend', endFn); + element.addEventListener('touchcancel', endFn); + } +}; diff --git a/packages/tab/src/tabs.vue b/packages/tab/src/tabs.vue index abb91a582..68c325819 100644 --- a/packages/tab/src/tabs.vue +++ b/packages/tab/src/tabs.vue @@ -1,8 +1,26 @@ 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/steps.spec.js b/test/unit/specs/steps.spec.js index 905971554..9416e8a21 100644 --- a/test/unit/specs/steps.spec.js +++ b/test/unit/specs/steps.spec.js @@ -21,8 +21,21 @@ describe('Steps', () => { const finishStep = wrapper.find('.van-step')[0]; expect(finishStep.hasClass('van-step--finish')).to.be.true; + expect(finishStep.hasClass('van-step--horizontal')).to.be.true; const proccessStep = wrapper.find('.van-step')[1]; expect(proccessStep.hasClass('van-step--process')).to.be.true; }); + + it('create a vertical step', () => { + wrapper = mount(Steps, { + propsData: { + direction: 'vertical' + } + }); + + expect(wrapper.hasClass('van-steps')).to.be.true; + expect(wrapper.hasClass('van-steps--vertical')).to.be.true; + expect(wrapper.data().steps.length).to.equal(0); + }); }); 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' - } - }) - }); });