From 753f47b88806c0e61a1d3d62cc43bc168a2a2170 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=83=AD=E8=83=9C=E5=BC=BA?= Date: Fri, 21 Dec 2018 11:51:58 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3picker-view=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=8A=A8=E6=80=81=E8=AE=BE=E7=BD=AE=E9=AB=98=E5=BA=A6?= =?UTF-8?q?=E5=90=8E=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/picker-view-column/index.vue | 66 ++++++++++++------- .../view/components/picker-view/index.vue | 38 +++++------ 2 files changed, 59 insertions(+), 45 deletions(-) diff --git a/src/core/view/components/picker-view-column/index.vue b/src/core/view/components/picker-view-column/index.vue index 7303d58fa..558aa0e26 100644 --- a/src/core/view/components/picker-view-column/index.vue +++ b/src/core/view/components/picker-view-column/index.vue @@ -9,7 +9,6 @@ export default { return { scope: `picker-view-column-${Date.now()}`, inited: false, - height: 34, indicatorStyle: '', indicatorClass: '', indicatorHeight: 34, @@ -20,6 +19,9 @@ export default { } }, computed: { + height () { + return this.$parent.height + }, maskSize () { return (this.height - this.indicatorHeight) / 2 } @@ -49,8 +51,6 @@ export default { // this.__pageRerender = this._pageRerender.bind(this) }, mounted: function () { - this.height = this.$el.offsetHeight - this.indicatorHeight = this.$refs.indicator.offsetHeight this.touchtrack(this.$refs.main, '_handleTrack', true) this.setCurrent(this.current) this.$nextTick(() => { @@ -61,7 +61,7 @@ export default { methods: { _setItemHeight (height) { var style = document.createElement('style') - style.innerText = `.uni-picker__content.${this.scope}>*{height: ${height}px;overflow: hidden;}` + style.innerText = `.uni-picker-content.${this.scope}>*{height: ${height}px;overflow: hidden;}` document.head.appendChild(style) }, _handleTrack: function (e) { @@ -122,6 +122,11 @@ export default { var current = Math.min(this.current, index) this._scroller.update(current * this.indicatorHeight, undefined, this.indicatorHeight) }) + }, + _resize ({ + height + }) { + this.indicatorHeight = height } }, render (createElement) { @@ -135,24 +140,31 @@ export default { [ createElement('div', { ref: 'main', - staticClass: 'uni-picker__group' + staticClass: 'uni-picker-group' }, [ createElement('div', { ref: 'mask', - staticClass: 'uni-picker__mask', + staticClass: 'uni-picker-mask', class: this.maskClass, style: `background-size: 100% ${this.maskSize}px;${this.maskStyle}` }), createElement('div', { ref: 'indicator', - staticClass: 'uni-picker__indicator', + staticClass: 'uni-picker-indicator', class: this.indicatorClass, style: this.indicatorStyle - }), + }, [createElement('v-uni-resize-sensor', { + attrs: { + initial: true + }, + on: { + resize: this._resize + } + })]), createElement('div', { ref: 'content', - staticClass: 'uni-picker__content', + staticClass: 'uni-picker-content', class: this.scope, style: `padding: ${this.maskSize}px 0;` }, @@ -173,24 +185,28 @@ uni-picker-view-column { overflow: hidden; } -.uni-picker__group { +uni-picker-view-column[hidden] { + display: none; +} + +.uni-picker-group { height: 100%; } -.uni-picker__mask { +.uni-picker-mask { transform: translateZ(0); -webkit-transform: translateZ(0); } -.uni-picker__indicator, -.uni-picker__mask { +.uni-picker-indicator, +.uni-picker-mask { position: absolute; left: 0; width: 100%; z-index: 3; } -.uni-picker__mask { +.uni-picker-mask { top: 0; height: 100%; margin: 0 auto; @@ -205,15 +221,15 @@ uni-picker-view-column { background-repeat: no-repeat; } -.uni-picker__indicator { +.uni-picker-indicator { height: 34px; /* top: 102px; */ top: 50%; transform: translateY(-50%); } -.uni-picker__indicator, -.uni-picker__mask { +.uni-picker-indicator, +.uni-picker-mask { position: absolute; left: 0; width: 100%; @@ -221,7 +237,7 @@ uni-picker-view-column { pointer-events: none; } -.uni-picker__content { +.uni-picker-content { position: absolute; top: 0; left: 0; @@ -230,13 +246,13 @@ uni-picker-view-column { padding: 102px 0; } -.uni-picker__content > * { +.uni-picker-content > * { height: 34px; overflow: hidden; } -.uni-picker__indicator:after, -.uni-picker__indicator:before { +.uni-picker-indicator:after, +.uni-picker-indicator:before { content: " "; position: absolute; left: 0; @@ -245,7 +261,7 @@ uni-picker-view-column { color: #e5e5e5; } -.uni-picker__indicator:before { +.uni-picker-indicator:before { top: 0; border-top: 1px solid #e5e5e5; -webkit-transform-origin: 0 0; @@ -254,7 +270,7 @@ uni-picker-view-column { transform: scaleY(0.5); } -.uni-picker__indicator:after { +.uni-picker-indicator:after { bottom: 0; border-bottom: 1px solid #e5e5e5; -webkit-transform-origin: 0 100%; @@ -263,8 +279,8 @@ uni-picker-view-column { transform: scaleY(0.5); } -.uni-picker__indicator:after, -.uni-picker__indicator:before { +.uni-picker-indicator:after, +.uni-picker-indicator:before { content: " "; position: absolute; left: 0; diff --git a/src/core/view/components/picker-view/index.vue b/src/core/view/components/picker-view/index.vue index 616ff2e66..4a99d7d20 100644 --- a/src/core/view/components/picker-view/index.vue +++ b/src/core/view/components/picker-view/index.vue @@ -31,7 +31,7 @@ export default { data () { return { valueSync: [...this.value], - height: 0, + height: 34, items: [], changeSource: '' } @@ -62,23 +62,8 @@ export default { }) } } - }, - indicatorStyle () { - - }, - indicatorClass () { - - }, - maskStyle () { - - }, - maskClass () { - } }, - mounted: function () { - this.height = this.$el.offsetHeight - }, methods: { getItemIndex (vnode) { return this.items.indexOf(vnode) @@ -94,10 +79,15 @@ export default { this.$set(this.valueSync, index, val) } }, - _valueChanged: function (val) { + _valueChanged (val) { this.items.forEach(function (item, index) { item.componentInstance.setCurrent(val[index] || 0) }) + }, + _resize ({ + height + }) { + this.height = height } }, render (createElement) { @@ -114,11 +104,19 @@ export default { 'uni-picker-view', { on: this.$listeners - }, - [createElement('div', { + }, [createElement('v-uni-resize-sensor', { + attrs: { + initial: true + }, + on: { + resize: this._resize + } + }), + createElement('div', { ref: 'wrapper', 'class': 'uni-picker-view-wrapper' - }, items)]) + }, items) + ]) } } -- GitLab