textarea支持动态高度

master
chenjiajian 2023-04-13 10:59:39 +08:00
parent 128df30a62
commit e814a81b23
1 changed files with 11 additions and 3 deletions

View File

@ -11,12 +11,13 @@ class TextArea extends Component {
value: { value: {
type: String, type: String,
default: '', default: '',
attributes: false attribute: false
}, },
type: '', type: '',
autofocus: false, autofocus: false,
readOnly: false, readOnly: false,
disabled: false, disabled: false,
autosize: false,
maxlength: null, maxlength: null,
minlength: null, minlength: null,
'show-limit': false, 'show-limit': false,
@ -29,7 +30,7 @@ class TextArea extends Component {
:host { :host {
display: flex; display: flex;
width: 100%; width: 100%;
height: 80px; // height: 80px;
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
color: var(--color-dark-1); color: var(--color-dark-1);
@ -53,7 +54,7 @@ class TextArea extends Component {
flex: 1; flex: 1;
min-width: 36px; min-width: 36px;
width: 100%; width: 100%;
height: 100%; height: auto;
padding: 5px 8px; padding: 5px 8px;
border: 0; border: 0;
border-radius: inherit; border-radius: inherit;
@ -153,6 +154,13 @@ class TextArea extends Component {
] ]
onInput(e) { onInput(e) {
this.value = e.target.value 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
})
}
} }
onKeydown(ev) { onKeydown(ev) {
// console.log(ev.target) // console.log(ev.target)