From 881d1dbaf3d99ee2621892fd8d2d010af59b858c Mon Sep 17 00:00:00 2001 From: MrRaindrop Date: Tue, 31 Oct 2017 22:15:05 +0800 Subject: [PATCH] * [html5] bugfix: - fix waterfall: use headers below cells as footers. - fix issue WEEX-97. - fix click handler being invoked twice for switch. --- html5/render/vue/README.md | 6 ++- .../vue/components/scrollable/waterfall.js | 45 ++++++++++++++++--- html5/render/vue/components/switch.js | 27 ++++++++--- html5/render/vue/core/style.js | 24 ++++++---- package.json | 2 +- packages/weex-vue-render/README.md | 6 ++- packages/weex-vue-render/package.json | 2 +- 7 files changed, 86 insertions(+), 26 deletions(-) diff --git a/html5/render/vue/README.md b/html5/render/vue/README.md index 6af6a37ee1..ed83f59b8a 100644 --- a/html5/render/vue/README.md +++ b/html5/render/vue/README.md @@ -193,11 +193,15 @@ vue: { * fix image lazyloading. -#### 0.12.23 +#### 0.12.24 * add try catch to accessing localStorage. * support image sprite. +#### 0.12.25 + +* fix indicator position in one page slider. + ## component -> dom map | component | dom element | children | note | diff --git a/html5/render/vue/components/scrollable/waterfall.js b/html5/render/vue/components/scrollable/waterfall.js index 90529944db..325fe02614 100644 --- a/html5/render/vue/components/scrollable/waterfall.js +++ b/html5/render/vue/components/scrollable/waterfall.js @@ -93,7 +93,38 @@ function getWaterfall (weex) { _createChildren (h, rootStyle) { const slots = this.$slots.default || [] this._headers = [] + this._footers = [] this._others = [] + const len = slots.length + + for (let i = 0; i < len; i++) { + const vnode = slots[i] + const tag = vnode.componentOptions && vnode.componentOptions.tag + if (tag === 'refresh' || tag === 'loading') { + continue + } + if (tag === 'cell') { + break + } + if (tag === 'header') { + this._headers.push(vnode) + } + } + + for (let i = len - 1; i >= 0; i--) { + const vnode = slots[i] + const tag = vnode.componentOptions && vnode.componentOptions.tag + if (tag === 'refresh' || tag === 'loading') { + continue + } + if (tag === 'cell') { + break + } + if (tag === 'header') { + this._footers.push(vnode) + } + } + this._cells = slots.filter(vnode => { if (!vnode.tag || !vnode.componentOptions) return false const tag = vnode.componentOptions.tag @@ -101,27 +132,27 @@ function getWaterfall (weex) { this[`_${tag}`] = vnode return false } - if (tag === 'header') { - this._headers.push(vnode) - return false - } if (tag !== 'cell') { this._others.push(vnode) return false } return true }) + this._reCalc(rootStyle) this._genColumns(h) let children = [] this._refresh && children.push(this._refresh) - children = children - .concat(this._headers) - .concat(this._others) + children = children.concat(this._headers) + // .concat(this._others) children.push(h('html:div', { ref: 'columns', staticClass: 'weex-waterfall-inner-columns weex-ct' }, this._columns)) + children.push(h('html:div', { + ref: 'footers', + staticClass: 'weex-waterfall-footers weex-ct' + }, this._footers)) this._loading && children.push(this._loading) return [ h('article', { diff --git a/html5/render/vue/components/switch.js b/html5/render/vue/components/switch.js index 7f9562a8bb..11faa63674 100644 --- a/html5/render/vue/components/switch.js +++ b/html5/render/vue/components/switch.js @@ -115,6 +115,27 @@ function getSwitch (weex) { } }, + mounted () { + const el = this.$el + if (el && el.nodeType === 1) { + if (!this._removeClickHandler) { + const handler = evt => { + this.toggle() + } + this._removeClickHandler = el.removeEventListener.bind(el, 'click', handler) + el.addEventListener('click', handler) + } + } + }, + + beforeDestroy () { + const rm = this._removeClickHandler + if (rm) { + rm() + delete this._removeClickHandler + } + }, + render (createElement) { /* istanbul ignore next */ // if (process.env.NODE_ENV === 'development') { @@ -122,12 +143,6 @@ function getSwitch (weex) { // } return createElement('span', { attrs: { 'weex-type': 'switch' }, - on: { - click: event => { - this.$emit('click', event) - this.toggle() - } - }, staticClass: this.wrapperClass, staticStyle: extractComponentStyle(this) }, [createElement('small', { staticClass: 'weex-switch-inner' })]) diff --git a/html5/render/vue/core/style.js b/html5/render/vue/core/style.js index 691849b0b1..24184e0d8f 100644 --- a/html5/render/vue/core/style.js +++ b/html5/render/vue/core/style.js @@ -225,13 +225,13 @@ export function getComponentStyle (context, extract) { } return {} } - let style = {} + const style = {} let vnode = context.$vnode while (vnode) { extend(style, getStyle(vnode, extract)) vnode = vnode.parent } - style = autoPrefix(style) + const prefixedStyle = autoPrefix(style) /** * when prefixed value is a array, it should be applied to element * during the next tick. @@ -245,9 +245,9 @@ export function getComponentStyle (context, extract) { * "linear-gradient(to top,#f5fefd,#ffffff)"] * } */ - for (const k in style) { - if (Array.isArray(style[k])) { - const vals = style[k] + for (const k in prefixedStyle) { + if (Array.isArray(prefixedStyle[k])) { + const vals = prefixedStyle[k] context.$nextTick(function () { const el = context.$el if (el) { @@ -256,14 +256,20 @@ export function getComponentStyle (context, extract) { } } }) - if (k !== 'position') { delete style[k] } + if (k !== 'position') { + /** + * Should not delete prefixedStyle[k] directly. Otherwise will + * trigger issue: https://issues.apache.org/jira/projects/WEEX/issues/WEEX-97 + */ + prefixedStyle[k] = style[k] + } } } /** * If position is 'sticky', then add it to the stickyChildren of the parent scroller. */ - const pos = style.position + const pos = prefixedStyle.position const reg = /sticky$/ if (pos === 'fixed') { context.$nextTick(function () { @@ -274,7 +280,7 @@ export function getComponentStyle (context, extract) { }) } else if (isArray(pos) && pos[0].match(reg) || (pos + '').match(reg)) { - delete style.position + delete prefixedStyle.position // use native sticky. if (supportSticky()) { context.$nextTick(function () { @@ -304,7 +310,7 @@ export function getComponentStyle (context, extract) { } } - return style + return prefixedStyle } export function extractComponentStyle (context) { diff --git a/package.json b/package.json index 766310d3f3..e56501826b 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "subversion": { "browser": "0.5.0", "framework": "0.22.4", - "vue-render": "0.12.24", + "vue-render": "0.12.25", "transformer": ">=0.1.5 <0.5" }, "description": "A framework for building Mobile cross-platform UI", diff --git a/packages/weex-vue-render/README.md b/packages/weex-vue-render/README.md index 6af6a37ee1..ed83f59b8a 100644 --- a/packages/weex-vue-render/README.md +++ b/packages/weex-vue-render/README.md @@ -193,11 +193,15 @@ vue: { * fix image lazyloading. -#### 0.12.23 +#### 0.12.24 * add try catch to accessing localStorage. * support image sprite. +#### 0.12.25 + +* fix indicator position in one page slider. + ## component -> dom map | component | dom element | children | note | diff --git a/packages/weex-vue-render/package.json b/packages/weex-vue-render/package.json index e54f49b30c..3b0e034fa9 100644 --- a/packages/weex-vue-render/package.json +++ b/packages/weex-vue-render/package.json @@ -1,6 +1,6 @@ { "name": "weex-vue-render", - "version": "0.12.24", + "version": "0.12.25", "description": "Weex built-in components for Vue 2.x.", "license": "Apache-2.0", "main": "dist/index.common.js",