diff --git a/src/form/textarea.js b/src/form/textarea.js index 91fc30d..82fcbbb 100644 --- a/src/form/textarea.js +++ b/src/form/textarea.js @@ -18,6 +18,8 @@ class TextArea extends Component { readOnly: false, disabled: false, autosize: false, + maxheight: null, + minheight: null, maxlength: null, minlength: null, 'show-limit': false, @@ -157,11 +159,24 @@ class TextArea extends Component { onInput(e) { this.value = e.target.value if (this.autosize) { - nextTick(() => { - this.$refs.textarea.style.height = 'auto' - let height = this.$refs.textarea.scrollHeight + 'px' - this.$refs.textarea.style.height = height - }) + nextTick(() => this.adjustTextareaSize()) + } + } + adjustTextareaSize() { + let { maxheight, minheight } = this + const input = this.$refs.textarea + input.style.height = 'auto' + let height = input.scrollHeight + + if (minheight && !Number.isNaN(+minheight)) { + height = Math.max(minheight, height) + } + if (maxheight && !Number.isNaN(+maxheight)) { + input.style.overflow = height > maxheight ? 'auto' : 'hidden' + height = Math.min(maxheight, height) + } + if (input.style.height !== height) { + input.style.height = height + 'px' } } onKeydown(ev) { @@ -223,6 +238,10 @@ class TextArea extends Component { // 火狐浏览器需要手动focus()才能聚焦成功 nextTick(_ => this.$refs.textarea.focus()) } + if (this.autosize) { + this.minheight = this.minheight || this.offsetHeight - 2 + this.adjustTextareaSize() + } } }