vue3 + textarea实现高度自适应
<template><textarea ref="textareaRef" v-model="content" class="my-textarea" :rows="rows"/></template><script>import {ref, watch, nextTick, onMounted} from 'vue'export default {name: 'MyTextarea',components: {},setup (props, {emit}) {const textareaRef = ref(null);const rows = ref(1)const content = ref('')onMounted(() => {nextTick(adjustTextareaSize);});watch(() => content.value, () => {nextTick(adjustTextareaSize);})// 参考vant组件库中的field组件const adjustTextareaSize = () => {let textarea = textareaRef.valuetextarea.style.height = 'auto'; const height = textarea.scrollHeight;if (height) {// 改变textarea高度达到自适应textarea.style.height = height + "px";}}return {textareaRef,rows,content}}}</script>
