template
<template>
<textarea class="default-textarea" :style="styleObject" ref="textarea" v-model="text" :placeholder="placeholder" @input="handleChange" />
</template>
script 可传入样式数据
<script>
export default {
props: {
// v-model 绑定的值
value: [String, Number],
//
placeholder: {
type: String,
default: ''
},
styleObject: {
type: Object,
default: _ => {}
}
},
data() {
return {
text: ''
};
},
created() {
this.text = this.value
},
watch: {
value(newVal) {
this.text = newVal
}
},
methods: {
handleChange(event) {
this.text = event.target.value;
this.$emit('input', this.text)
let textarea = this.$refs.textarea;
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight}px`;
}
}
};
</script>
style
<style lang="less" scoped>
.default-textarea {
width: 100%;
min-height: 20px;
border: 0;
resize: none;
min-height: 20px;
}
</style>