时间戳

首页 > 解决方案 > 如何运行一个函数来设置特定类型的所有 HTML 标签的高度？

javascript - 如何运行一个函数来设置特定类型的所有 HTML 标签的高度？

问题描述

我textarea在很多地方都有一些条件渲染元素，form根据用户的操作显示/隐藏这些元素。例如：

<li v-if="Form.Type === 1">
<textarea v-model="Form.Title" ref="RefTitle"></textarea>
</li>

可以有任意数量的textarea元素，如上述。我需要做的是在生命周期中的某些点（例如onMounted，onUpdated）调整这​​些元素的大小。

触发执行此操作的函数是：

setup() {
...

const RefTitle = ref(); // This is the ref element in the template
    function autosizeTextarea() {
        RefTitle.value.style.height = "35px"; // Default if value is empty
        RefTitle.value.style.height = `${RefTitle.value.scrollHeight}px`;
    }

...
}

在上面的代码中，我专门针对一个已知textarea的ref. RefTitle我可以使用if(RefTitle.value)语句来测试它的存在。

但是我怎样才能得到所有textarea可能被渲染的元素，然后autosizeTextarea在所有这些元素上运行呢？

我可以得到所有这样的textarea元素：

setup() {
...

    function autosizeTextarea() {
        const AllTextareas = document.getElementsByTagName('TEXTAREA');
        for (let i=0; i < AllTextareas.length; i++) {
        // How can I set the style.height = `${RefTitle.value.scrollHeight}px`; 
        // in here for each element?
        }
        
    }

...
}

但是如何style.height设置所有这些？

标签： javascriptvue.jsvuejs3

解决方案

您可以创建自己的自定义组件来表示具有组件本身功能的文本区域，因此您不必获取所有动态创建的文本区域。

它可能看起来像这样：

<template>
  <textarea :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" ref="textarea" :style="styleObject"></textarea>
</template>
<script>
export default {
  emits: {
    'update:modelValue': null,
  },
  props: {
    modelValue: {
      type: String,
    },
    // Prop for dynamic styling
    defaultHeight: {
      type: Number,
      required: false,
      default: 35,
      validator(val) {
        // Custom Validator to ensure that there are no crazy values
        return val > 10 && val < 100;
      }
  },
  computed: {
    styleObject() {
      return {
        height: this.$refs['textarea'].value.scrollHeight ? `${this.$refs['textarea'].value.scrollHeight}px` : `${this.defaultHeight}px`,
    }
  },
</script>

这样你甚至可以使用v-model它。

<li v-if="Form.Type === 1">
<custom-textarea v-model="Form.Title" :defaultHeight="45"></textarea>
</li>

我提供的模板只是为了向您展示自定义组件的外观。您可能必须根据您真正想要更改/触发事物的时间将其融入您的逻辑。

推荐阅读