textarea支持动态高度
parent
128df30a62
commit
e814a81b23
|
@ -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)
|
||||||
|
|
Loading…
Reference in New Issue