Vue3中如何对所有textarea标签批量执行高度设置函数实现自适应？

直接修改现有代码的方案 #

你通过document.getElementsByTagName拿到的每一项就是textarea的原生DOM实例，和你之前通过ref.value获取的对象完全一致，直接遍历操作即可：

function autosizeTextarea() {
    // 先把HTMLCollection转成数组，避免活DOM集合遍历出现异常
    const AllTextareas = Array.from(document.getElementsByTagName('TEXTAREA'));
    AllTextareas.forEach(textarea => {
        textarea.style.height = "35px"; // 默认高度
        textarea.style.height = `${textarea.scrollHeight}px`;
    })
}

如果你的页面中存在不需要自动调整高度的其他textarea，可以给需要调整的textarea加个专属类名比如auto-size-area，改用类选择器过滤：

const AllTextareas = Array.from(document.querySelectorAll('textarea.auto-size-area'));

更符合Vue规范的实现方案 #

直接全局查询DOM有概率拿到组件外的无关textarea，更稳妥的方式是用动态ref数组收集目标元素：

1. 模板部分：所有需要自动高度的textarea绑定同一个ref注册方法

<li v-if="Form.Type === 1">
  <textarea v-model="Form.Title" :ref="registerTextarea"></textarea>
</li>
<li v-if="Form.Type === 2">
  <textarea v-model="Form.Desc" :ref="registerTextarea"></textarea>
</li>

2. 逻辑部分：

setup() {
    const textareaRefs = ref([])
    // 注册ref，仅保留当前渲染的有效DOM
    const registerTextarea = (el) => {
        el && textareaRefs.value.push(el)
    }

    function autosizeTextarea() {
        // 每次执行前清空旧的ref缓存
        textareaRefs.value = []
        // 等待DOM更新完成后再遍历调整高度
        nextTick(() => {
            textareaRefs.value.forEach(textarea => {
                textarea.style.height = "35px";
                textarea.style.height = `${textarea.scrollHeight}px`;
            })
        })
    }

    onMounted(() => autosizeTextarea())
    onUpdated(() => autosizeTextarea())

    return {
        registerTextarea
    }
}

内容的提问来源于stack exchange，提问作者volume one