From 8d55bba5507d88b0e27a0ef70c2294e4a8a226f7 Mon Sep 17 00:00:00 2001 From: Yao Date: Fri, 2 Jun 2017 16:11:46 +0800 Subject: [PATCH 01/14] utils/scroll (#37) * add set scroll top --- src/utils/scroll.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/utils/scroll.js b/src/utils/scroll.js index 5f113ad53..c58575173 100644 --- a/src/utils/scroll.js +++ b/src/utils/scroll.js @@ -55,6 +55,11 @@ export default { return 'scrollTop' in element ? element.scrollTop : element.pageYOffset; }, + // 设置滚动高度 + setScrollTop(element, value) { + 'scrollTop' in element ? element.scrollTop = value : element.scrollTo(element.scrollX, value); + }, + // 获取元素距离顶部高度 getElementTop(element) { if (element === window) { From 3829d3dbdd1592970d4c712f9152eac7f2696cd4 Mon Sep 17 00:00:00 2001 From: cookfront Date: Fri, 2 Jun 2017 16:13:04 +0800 Subject: [PATCH 02/14] [build] 0.5.12 --- packages/vant-css/package.json | 2 +- src/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vant-css/package.json b/packages/vant-css/package.json index 91c2f2a41..c076b2ca1 100644 --- a/packages/vant-css/package.json +++ b/packages/vant-css/package.json @@ -1,6 +1,6 @@ { "name": "vant-css", - "version": "0.5.11", + "version": "0.5.12", "description": "vant css.", "main": "lib/index.css", "style": "lib/index.css", diff --git a/src/index.js b/src/index.js index 7146342dd..9566cdfb8 100644 --- a/src/index.js +++ b/src/index.js @@ -81,7 +81,7 @@ if (typeof window !== 'undefined' && window.Vue) { module.exports = { install, - version: '0.5.11', + version: '0.5.12', Button, Switch, Field, From e15d0d504b79bcda27c1b00f345289b8e8bca528 Mon Sep 17 00:00:00 2001 From: cookfront Date: Fri, 2 Jun 2017 16:13:05 +0800 Subject: [PATCH 03/14] [release] 0.5.12 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 99bdadd2c..c37b2f2bc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vant", - "version": "0.5.11", + "version": "0.5.12", "description": "有赞vue wap组件库", "main": "lib/vant.js", "style": "lib/vant-css/index.css", From cfe9ebaf86390247b836e3d41bdc84ff3ee93462 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=95=8F?= Date: Fri, 9 Jun 2017 14:52:08 +0800 Subject: [PATCH 04/14] =?UTF-8?q?Search=E7=BB=84=E4=BB=B6=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E5=BE=AE=E6=9D=82=E5=BF=97=E6=A0=B7=E5=BC=8F=20(#38)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * search component add new style --- docs/examples-docs/search.md | 11 ++++++++- packages/search/src/search.vue | 20 ++++++++++++--- packages/vant-css/src/search.css | 9 +++++++ src/utils/clickoutside.js | 42 ++++++++++++++++++++++++++++++++ test/unit/specs/search.spec.js | 21 ++++++++++++++++ 5 files changed, 99 insertions(+), 4 deletions(-) create mode 100644 src/utils/clickoutside.js diff --git a/docs/examples-docs/search.md b/docs/examples-docs/search.md index 342e6c44a..241312784 100644 --- a/docs/examples-docs/search.md +++ b/docs/examples-docs/search.md @@ -69,6 +69,14 @@ export default { ``` ::: +#### 微杂志页搜索样式 + +:::demo 基础用法 +```html + +``` +::: + #### 监听对应事件 除了`search`事件，还有`change`和`cancel`事件，`change`事件在`input`输入框每次`change`时触发，适用于实时搜索等，`cancel`在取消按钮点击时触发。 @@ -97,9 +105,10 @@ export default { ### API -| 参数 | 说明 | 类型 | 默认值 | 必须 | +| 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | placeholder | `input`的`placeholder`文案 | `string` | | | +| type | 搜索样式类型 | `string` | `normal` | `normal`：普通样式，`showcase`：微杂志页样式 | ### Event diff --git a/packages/search/src/search.vue b/packages/search/src/search.vue index 398a89ff4..1fa344e14 100644 --- a/packages/search/src/search.vue +++ b/packages/search/src/search.vue @@ -1,5 +1,8 @@ \ No newline at end of file diff --git a/docs/examples-dist/search.vue b/docs/examples-dist/search.vue index 24b981d97..0a05cfb6e 100644 --- a/docs/examples-dist/search.vue +++ b/docs/examples-dist/search.vue @@ -3,6 +3,9 @@ + + + diff --git a/docs/examples-docs/cell-swipe.md b/docs/examples-docs/cell-swipe.md new file mode 100644 index 000000000..51659b0be --- /dev/null +++ b/docs/examples-docs/cell-swipe.md @@ -0,0 +1,91 @@ + + +## 滑动单元格 + +### 使用指南 + +如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。 + +#### 全局注册 + +你可以在全局注册`Cell Swipe`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Cell Swipe`组件了： + +```js +import Vue from 'vue'; +import { CellSwipe } from 'vant'; +import 'vant/lib/vant-css/cell-swipe.css'; + +Vue.component(CellSwipe.name, CellSwipe); +``` + +#### 局部注册 + +如果你只是想在某个组件中使用，你可以在对应组件中注册`Cell Swipe`组件，这样只能在你注册的组件中使用`Cell Swipe`： + +```js +import { CellSwipe } from 'vant'; + +export default { + components: { + 'van-cell-swipe': CellSwipe + } +}; +``` + +### 代码演示 + +#### 基础用法 + +:::demo 基础用法 +```html + + + + + + + 删除 + + + 选择 + + +``` +::: + + +### API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| right-width | 右侧滑动按钮宽度 | `number` | 0 | | +| left-width | 左侧滑动按钮宽度 | `number` | 0 | | + +### Slot + +| name | 描述 | +|-----------|-----------| +| - | 自定义显示内容 | +| right | 右侧滑动内容 | +| left | 左侧滑动内容 | diff --git a/docs/src/nav.config.js b/docs/src/nav.config.js index b64adcc35..6f155b732 100644 --- a/docs/src/nav.config.js +++ b/docs/src/nav.config.js @@ -37,6 +37,10 @@ module.exports = { "path": "/cell", "title": "Cell 单元格" }, + { + "path": "/cell-swipe", + "title": "Cell Swipe 滑动单元格" + }, { "path": "/progress", "title": "Progress 进度条" diff --git a/packages/cell-swipe/components/CellSwipe.vue b/packages/cell-swipe/components/CellSwipe.vue new file mode 100644 index 000000000..777402261 --- /dev/null +++ b/packages/cell-swipe/components/CellSwipe.vue @@ -0,0 +1,142 @@ + + + + diff --git a/packages/cell-swipe/index.js b/packages/cell-swipe/index.js new file mode 100644 index 000000000..bb9559c21 --- /dev/null +++ b/packages/cell-swipe/index.js @@ -0,0 +1,2 @@ +import CellSwipe from './components/CellSwipe.vue' +export default CellSwipe; diff --git a/packages/vant-css/src/cell-swipe.css b/packages/vant-css/src/cell-swipe.css new file mode 100644 index 000000000..637e93854 --- /dev/null +++ b/packages/vant-css/src/cell-swipe.css @@ -0,0 +1,27 @@ + +.van-cell-swipe .van-cell-wrapper, .van-cell-swipe .van-cell-left, .van-cell-swipe .van-cell-right { + -webkit-transition: -webkit-transform 150ms ease-in-out; + transition: -webkit-transform 150ms ease-in-out; + transition: transform 150ms ease-in-out; + transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out; +} + +.van-cell-swipe{ + position: relative; + min-height: 48px; + overflow: hidden; +} +.van-cell-right{ + position: absolute; + height: 100%; + right: 0; + top: 0; + transform: translate3d(100%,0,0); +} +.van-cell-left { + position: absolute; + height: 100%; + left: 0; + top: 0; + transform: translate3d(-100%,0,0); +} \ No newline at end of file diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css index 85785cd78..d83ee1789 100644 --- a/packages/vant-css/src/index.css +++ b/packages/vant-css/src/index.css @@ -4,6 +4,7 @@ @import './reset.css'; @import './button.css'; @import './cell.css'; +@import './cell-swipe.css'; @import './card.css'; @import './dialog.css'; @import './field.css'; diff --git a/src/index.js b/src/index.js index 9566cdfb8..37c200d8c 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,7 @@ import Radio from '../packages/radio/index.js'; import Cell from '../packages/cell/index.js'; import Icon from '../packages/icon/index.js'; import CellGroup from '../packages/cell-group/index.js'; +import CellSwipe from '../packages/cell-swipe/index.js'; import Popup from '../packages/popup/index.js'; import Dialog from '../packages/dialog/index.js'; import Picker from '../packages/picker/index.js'; @@ -47,6 +48,7 @@ const install = function(Vue) { Vue.component(Cell.name, Cell); Vue.component(Icon.name, Icon); Vue.component(CellGroup.name, CellGroup); + Vue.component(CellSwipe.name, CellSwipe); Vue.component(Popup.name, Popup); Vue.component(Picker.name, Picker); Vue.component(RadioGroup.name, RadioGroup); @@ -89,6 +91,7 @@ module.exports = { Cell, Icon, CellGroup, + CellSwipe, Popup, Dialog, Picker, diff --git a/src/utils/dom.js b/src/utils/dom.js index ede0951ec..b5c2550a6 100644 --- a/src/utils/dom.js +++ b/src/utils/dom.js @@ -55,3 +55,44 @@ export function removeClass(el, cls) { el.className = trim(curClass); } }; +export const once = function(el, event, fn) { + var listener = function() { + if (fn) { + fn.apply(this, arguments); + } + off(el, event, listener); + }; + on(el, event, listener); +}; + +export const on = (function() { + if (document.addEventListener) { + return function(element, event, handler) { + if (element && event && handler) { + element.addEventListener(event, handler, false); + } + }; + } else { + return function(element, event, handler) { + if (element && event && handler) { + element.attachEvent('on' + event, handler); + } + }; + } +})(); + +export const off = (function() { + if (document.removeEventListener) { + return function(element, event, handler) { + if (element && event) { + element.removeEventListener(event, handler, false); + } + }; + } else { + return function(element, event, handler) { + if (element && event) { + element.detachEvent('on' + event, handler); + } + }; + } +})(); diff --git a/test/unit/specs/cell-swipe.spec.js b/test/unit/specs/cell-swipe.spec.js new file mode 100644 index 000000000..46325f291 --- /dev/null +++ b/test/unit/specs/cell-swipe.spec.js @@ -0,0 +1,141 @@ +import CellSwipe from 'packages/cell-swipe'; +import { mount } from 'avoriaz'; + +describe('CellSwipe', () => { + let wrapper; + afterEach(() => { + wrapper && wrapper.destroy(); + }); + + it('create a CellSwipe', () => { + wrapper = mount(CellSwipe, { + propsData: { + leftWidth: 2, + rightWidth: 2 + } + }); + wrapper.vm.startDrag({ + pageX: 0, + pageY: 0 + }); + wrapper.vm.onDrag({ + preventDefault() {}, + pageY: 0, + pageX: 50 + }); + wrapper.vm.offsetLeft = -20; + wrapper.vm.rightWidth = 10; + wrapper.vm.swipeLeaveTransition(1); + wrapper.vm.endDrag(); + expect(wrapper.hasClass('van-cell-swipe')).to.be.true; + }); +}); + + +describe('CellSwipe-left', () => { + let wrapper; + afterEach(() => { + wrapper && wrapper.destroy(); + }); + + it('create a CellSwipe left', () => { + wrapper = mount(CellSwipe, { + propsData: { + leftWidth: 2, + rightWidth: 2 + } + }); + wrapper.vm.startDrag({ + changedTouches: [{ + pageX: 0, + pageY: 0 + } + ] + }); + wrapper.vm.onDrag({ + preventDefault() {}, + changedTouches: [{ + pageX: 0, + pageY: -50 + } + ] + }); + wrapper.vm.offsetLeft = 20; + wrapper.vm.rightWidth = 10; + wrapper.vm.swipeLeaveTransition(-1); + wrapper.vm.endDrag(); + expect(wrapper.hasClass('van-cell-swipe')).to.be.true; + }); +}); + +describe('CellSwipe-0', () => { + let wrapper; + afterEach(() => { + wrapper && wrapper.destroy(); + }); + + it('create a CellSwipe 0', () => { + wrapper = mount(CellSwipe, { + propsData: { + leftWidth: 0, + rightWidth: 2 + } + }); + wrapper.vm.startDrag({ + pageX: 0, + pageY: 0 + }); + wrapper.vm.onDrag({ + preventDefault() {}, + pageY: 0, + pageX: -2 + }); + wrapper.vm.opened = true; + wrapper.vm.onDrag({ + preventDefault() {}, + pageY: 0, + pageX: -2 + }); + wrapper.vm.opened = false; + wrapper.vm.onDrag({ + preventDefault() {}, + pageY: 0, + pageX: 40 + }); + wrapper.vm.swipeLeaveTransition(0); + wrapper.vm.endDrag(); + expect(wrapper.hasClass('van-cell-swipe')).to.be.true; + }); +}); + + +describe('CellSwipe-0', () => { + let wrapper; + afterEach(() => { + wrapper && wrapper.destroy(); + }); + + it('create a CellSwipe 0', () => { + wrapper = mount(CellSwipe, { + propsData: { + leftWidth: 0, + rightWidth: 2 + } + }); + wrapper.vm.startDrag({ + pageX: 0, + pageY: 0 + }); + wrapper.vm.onDrag({ + preventDefault() {}, + pageY: 1000, + pageX: 40 + }); + wrapper.vm.swipeMove(); + wrapper.vm.swiping = false; + wrapper.vm.endDrag(); + wrapper.vm.swiping = true; + wrapper.vm.endDrag(); + expect(wrapper.hasClass('van-cell-swipe')).to.be.true; + }); +}); From 0f5972e75ed7d9d89a8dbb9a9ffaeb56d103289a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=95=8F?= Date: Thu, 15 Jun 2017 19:46:56 +0800 Subject: [PATCH 06/14] =?UTF-8?q?=E6=94=AF=E6=8C=81SSR=E3=80=81=E5=8D=87?= =?UTF-8?q?=E7=BA=A7Vue=E7=89=88=E6=9C=AC=E5=92=8C=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E6=96=B0=E7=9A=84icon=20(#40)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * search component add new style * update vue version and support ssr * unit test * add new icon * new icon --- build/webpack.config.dev.js | 9 +- docs/examples-dist/checkbox.vue | 8 +- docs/examples-dist/icon.vue | 33 ++++- docs/examples-dist/lazyload.vue | 6 +- docs/examples-dist/progress.vue | 6 +- docs/examples-dist/swipe.vue | 4 +- docs/examples-dist/switch.vue | 8 +- docs/examples-dist/uploader.vue | 2 + docs/examples-dist/waterfall.vue | 2 +- docs/examples-docs/checkbox.md | 8 +- docs/examples-docs/datetime-picker.md | 4 +- docs/examples-docs/icon.md | 33 ++++- docs/examples-docs/lazyload.md | 6 +- docs/examples-docs/progress.md | 6 +- docs/examples-docs/quickstart.md | 26 +++- docs/examples-docs/swipe.md | 4 +- docs/examples-docs/switch.md | 8 +- docs/examples-docs/uploader.md | 11 ++ docs/examples-docs/waterfall.md | 3 +- docs/src/components/demo-list.vue | 6 +- docs/src/components/mobile-nav.vue | 3 +- docs/src/components/page-header.vue | 6 +- docs/src/components/side-nav.vue | 9 +- docs/src/examples.js | 8 +- package.json | 21 ++-- packages/actionsheet/src/actionsheet.vue | 3 +- packages/badge/src/badge.vue | 8 +- .../datetime-picker/src/datetime-picker.vue | 2 +- packages/image-preview/src/image-preview.js | 2 + packages/image-preview/src/image-preview.vue | 2 +- packages/picker/src/picker-column.vue | 3 +- packages/picker/src/picker.vue | 1 + packages/swipe/src/input.js | 3 + packages/swipe/src/swipe.vue | 4 +- packages/swipe/src/utils.js | 29 +++-- packages/tab/src/tabs.vue | 1 + packages/vant-css/assets/icons.sketch | Bin 191585 -> 210206 bytes packages/vant-css/scripts/fount-config.js | 31 +++++ packages/vant-css/src/icon.css | 18 ++- src/mixins/popup/index.js | 1 + src/mixins/popup/popup-context.js | 9 +- src/mixins/popup/popup-manager.js | 2 + src/utils/scroll.js | 4 +- test/unit/specs/actionsheet.spec.js | 4 +- test/unit/specs/badge.spec.js | 2 +- test/unit/specs/button.spec.js | 6 +- test/unit/specs/cell.spec.js | 2 +- test/unit/specs/checkbox.spec.js | 8 +- test/unit/specs/field.spec.js | 6 +- test/unit/specs/icon.spec.js | 2 +- test/unit/specs/image-preview.spec.js | 12 +- test/unit/specs/layout.spec.js | 4 +- test/unit/specs/picker.spec.js | 4 +- test/unit/specs/quantity.spec.js | 10 +- test/unit/specs/radio.spec.js | 8 +- test/unit/specs/search.spec.js | 14 +-- test/unit/specs/switch.spec.js | 8 +- test/unit/specs/tabs.spec.js | 4 +- yarn.lock | 117 ++++++++++-------- 59 files changed, 370 insertions(+), 204 deletions(-) diff --git a/build/webpack.config.dev.js b/build/webpack.config.dev.js index d2538370d..04ca6c82f 100644 --- a/build/webpack.config.dev.js +++ b/build/webpack.config.dev.js @@ -7,6 +7,7 @@ var getPostcssPlugin = require('./utils/postcss_pipe'); var ProgressBarPlugin = require('progress-bar-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); +var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') var StyleExtractPlugin; if (process.env.NODE_ENV === 'production') { @@ -25,8 +26,7 @@ function convert(str) { function wrap(render) { return function() { return render.apply(this, arguments) - .replace('', ''); + .replace(/\
- 复选框2 + 复选框2
@@ -15,7 +15,7 @@
- 复选框{{item}} + 复选框{{item}}
@@ -24,7 +24,7 @@
- 复选框{{item}} + 复选框{{item}}
@@ -33,7 +33,7 @@ - + 复选框{{item}} diff --git a/docs/examples-dist/icon.vue b/docs/examples-dist/icon.vue index dc0e0a8e7..a208f1a82 100644 --- a/docs/examples-dist/icon.vue +++ b/docs/examples-dist/icon.vue @@ -120,18 +120,42 @@ password-view - - - password-not-view - wap-nav + + + password-not-view + wap-home + + + ecard-pay + + + + balance-pay + + + + peer-pay + + + + credit-pay + + + + debit-pay + + + + other-pay + @@ -140,6 +164,7 @@ @b icon { .van-col { text-align: center; + height: 120px; } .van-icon { diff --git a/docs/examples-dist/lazyload.vue b/docs/examples-dist/lazyload.vue index bab9e763d..c8d1579c2 100644 --- a/docs/examples-dist/lazyload.vue +++ b/docs/examples-dist/lazyload.vue @@ -1,6 +1,6 @@