提交 7028ffe1 编写于 作者: Q qiang

fix: 解决 textarea 组件自动计算高度不正确的问题

上级 6d451bf3
<template> <template>
<uni-textarea <uni-textarea v-on="$listeners">
style="height:height+'px'"
v-on="$listeners">
<div <div
ref="wrapped" ref="wrapped"
class="uni-textarea-wrapped"> class="uni-textarea-wrapped">
...@@ -10,7 +8,16 @@ ...@@ -10,7 +8,16 @@
ref="placeholder" ref="placeholder"
:style="placeholderStyle" :style="placeholderStyle"
:class="placeholderClass" :class="placeholderClass"
class="uni-textarea-placeholder">{{ placeholder }}</div> class="uni-textarea-placeholder"
>{{ placeholder }}</div>
<div class="uni-textarea-compute">
<div
v-for="(item,index) in valueCompute"
:key="index">{{ item||'.' }}</div>
<v-uni-resize-sensor
ref="sensor"
@resize="_resize"/>
</div>
<textarea <textarea
ref="textarea" ref="textarea"
v-model="valueSync" v-model="valueSync"
...@@ -21,11 +28,11 @@ ...@@ -21,11 +28,11 @@
class="uni-textarea-textarea" class="uni-textarea-textarea"
@compositionstart="_compositionstart" @compositionstart="_compositionstart"
@compositionend="_compositionend" @compositionend="_compositionend"
@input.stop @input.stop="_input"
@focus="_focus" @focus="_focus"
@blur="_blur" @blur="_blur"
@touchstart.passive="_touchstart" @touchstart.passive="_touchstart"
@scroll.passive="_scroll"/> />
</div> </div>
</uni-textarea> </uni-textarea>
</template> </template>
...@@ -101,6 +108,7 @@ export default { ...@@ -101,6 +108,7 @@ export default {
data () { data () {
return { return {
valueSync: String(this.value), valueSync: String(this.value),
valueComposition: '',
composition: false, composition: false,
focusSync: this.focus, focusSync: this.focus,
height: 0, height: 0,
...@@ -123,6 +131,9 @@ export default { ...@@ -123,6 +131,9 @@ export default {
selectionEndNumber () { selectionEndNumber () {
var selectionEnd = Number(this.selectionEnd) var selectionEnd = Number(this.selectionEnd)
return isNaN(selectionEnd) ? -1 : selectionEnd return isNaN(selectionEnd) ? -1 : selectionEnd
},
valueCompute () {
return (this.composition ? this.valueComposition : this.valueSync).split('\n')
} }
}, },
watch: { watch: {
...@@ -185,7 +196,9 @@ export default { ...@@ -185,7 +196,9 @@ export default {
}, },
mounted () { mounted () {
this.$refs.textarea.value = this.valueSync this.$refs.textarea.value = this.valueSync
this._computeHeight() this._resize({
height: this.$refs.sensor.$el.offsetHeight
})
}, },
beforeDestroy () { beforeDestroy () {
this.$dispatch('Form', 'uni-form-group-update', { this.$dispatch('Form', 'uni-form-group-update', {
...@@ -194,11 +207,6 @@ export default { ...@@ -194,11 +207,6 @@ export default {
}) })
}, },
methods: { methods: {
_computeHeight () {
this.$nextTick(() => {
this.height = this.$refs.textarea.scrollHeight
})
},
_focus: function ($event) { _focus: function ($event) {
this.focusSync = true this.focusSync = true
this.$trigger('focus', $event, { this.$trigger('focus', $event, {
...@@ -243,8 +251,13 @@ export default { ...@@ -243,8 +251,13 @@ export default {
_touchstart () { _touchstart () {
this.focusChangeSource = 'touch' this.focusChangeSource = 'touch'
}, },
_scroll () { _resize ({ height }) {
this._computeHeight() this.height = height
},
_input ($event) {
if (this.composition) {
this.valueComposition = $event.target.value
}
}, },
_getFormData () { _getFormData () {
return { return {
...@@ -284,6 +297,7 @@ uni-textarea { ...@@ -284,6 +297,7 @@ uni-textarea {
color: inherit; color: inherit;
} }
.uni-textarea-placeholder, .uni-textarea-placeholder,
.uni-textarea-compute,
.uni-textarea-textarea { .uni-textarea-textarea {
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
...@@ -305,13 +319,17 @@ uni-textarea { ...@@ -305,13 +319,17 @@ uni-textarea {
.uni-textarea-placeholder { .uni-textarea-placeholder {
color: grey; color: grey;
} }
.uni-textarea-compute {
visibility: hidden;
height: auto;
}
.uni-textarea-textarea { .uni-textarea-textarea {
outline: none; outline: none;
border: none; border: none;
padding: 0; padding: 0;
resize: none; resize: none;
background-color: transparent; background-color: transparent;
opacity: inherit; opacity: inherit;
} }
.uni-textarea-textarea::-webkit-input-placeholder { .uni-textarea-textarea::-webkit-input-placeholder {
color: transparent; color: transparent;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册