Question

我希望根据放置在其中的文本的数量来增加和缩小v-textarea，但是在下面的问题中，我遇到了一个封闭的v-layout内的v-textarea（不是展开）。

使用此

<v-flex md8 px-1 offset-md2>
   <v-textarea v-model="comments" @input="inputComments" rows="1" auto-grow :disabled="!editMode"></v-textarea>
</v-flex>

该字段仅显示1行，并且不会自动增长。您可以看到第二行未完全显示。

当我删除“ rows =“ 1”时，这就是我看到的（多余的空格），因为文本区域的默认行是5

是否没有办法使它根据文本的行自动增长，或者在扩展后重新自动增长？我以为应该是这样，但是我可能错了！

仅供参考-此文本区域位于隐藏的部分中，仅在该部分展开时才会显示。我在页面上的其他文本区域（不在扩展区域中）显示/自动增长就很好了！

Answer 1

当带有 auto-grow 的 v-textarea 位于 v-expansion-panel-content

内时，我遇到了类似的问题

只需用 v-lazy 组件包裹它，auto-grow 应该会按预期工作

 <v-expansion-panel-content>
    <v-lazy>
      <v-textarea
       :key="autoGrowHack"
       v-model="textAreaVal"
       auto-grow
      ></v-textarea>
   </v-lazy>
 </v-expansion-panel-content>

Answer 2

我遇到了类似的问题，并通过将key的{{1}}属性设置为变量并手动更改了该变量来解决该问题，从而迫使组件重新呈现。重新渲染后，v-textarea正常工作。

auto-grow

就何时调用<template> <v-textarea :key="autoGrowHack" v-model="textAreaVal" auto-grow ></v-textarea> </template> <script> export default { data() { return { autoGrowHack: false, textAreaVal: "lorem ipsum", } }, methods: { forceReRender() { this.autoGrowHack = !this.autoGrowHack; } }, } </script>函数而言，这将取决于代码中的细节。我在forceReRender标签上的组件内部使用了v-textarea，发现当v-stepper的步骤更改为带有该组件的步骤时触发了切换

我猜想这与vuetify上的以下打开错误相关，该错误也与自动增长相关：https://github.com/vuetifyjs/vuetify/issues/6995

Answer 3

在我的情况下，v-textrea有时是隐藏的，当再次显示时，无法正确计算高度；

没有发现比这更好的

<template>
  <!-- . . . . .-->
    <v-textarea
      ref="vTextarea"
      :value="vTextareaValue"
      auto-grow
      hide-details
      rows="1"
      single-line
    />
</template>
<script>
export default Vue.extend({
  data() {
    return {
      vTextareaWasMounted: false,
    };
  },
  updated: function () {
    let vTextAreaMounted = !!this.$refs.vTextarea;
    
    
    if (vTextAreaMounted && !this.vTextareaWasMounted) {
    
      let delays = [30, 60, 100, 200];
    
      delays.map((delay) => {
        setTimeout(() => {
          if (this.$refs.vTextarea) {
            console.log(this.$options.name + ': vTextarea force calculateInputHeight')
            this.$refs.vTextarea.calculateInputHeight();
          }
        }, delay)
      });
    }

    this.textareaWasMounted = vTextAreaMounted;
  },
});
</script>

计时器很丑陋，但我还不知道如何改进此解决方案

Answer 4

我也偶然发现了这个问题，它似乎与这个https://github.com/vuetifyjs/vuetify/issues/6995有关。

这是我所做的：

<template>
    <div>
        <v-textarea
            ...
            maxlength="1024" :rows="rows" auto-grow
            :disabled="isDisabled"
            ...
        >
        </v-textarea>
    </div>
</template>
<script>
    export default {
        name: "MyComponent",
        props: {
            isDisabled: {
                type: Boolean
            },
        },
        data() {
            return {
                rows: 3,
        },
    },
    mounted() {
        if (this.isDisabled) {
            this.rows = 5;
        }
    },
</script>

就我而言，我有一个道具 isDisabled 来检查是否应该禁用 v-textarea。因为我使用了一个 v-stepper 并且这个组件不是第一个显示的，所以自动增长错误开始了。最初，v-textarea 应该只有 3 行，并且会根据字符数进行扩展。

我创建了一个新属性 rows 并将其设置为默认值。当道具 isDisabled 为 true 时，我在挂载组件时将 rows 的值更改为 5。我选择值 5 是因为 1024 允许的字符似乎很适合我的情况。

希望有人觉得这有用！

Answer 5

我很欣赏其他答案，但并不完全满意，因为它们会导致闪烁或由于计时器等原因延迟。

我所做的是使用 v-resize 指令来捕获窗口何时调整大小，然后调用 calculateInputHeight()。例如，这是一个模板：

<div ref="container">
  <v-textarea :value="longText"
              label="Text"
              rows="1"
              auto-grow
              filled
              hide-details
              class="ma-4"
              ref="textarea"              
              v-resize="onWindowResized"></v-textarea>
</div>

和组件代码：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    textareaWidth: undefined,
    longText: [...Array(26)].map((el, i) => String.fromCharCode(97 + i).repeat(10)).join(' ')
  },
  methods: {
    onWindowResized() {
      let textareaWidth = this.$refs.container && this.$refs.container.offsetWidth;
      if (textareaWidth !== this.textareaWidth) {
        this.textareaWidth = textareaWidth;
        this.$refs.textarea.calculateInputHeight();
      }
    }
  }
})

这允许文本区域相应地调整大小，而不会闪烁。这是完整的 JSFiddle：DraggableDetails

Vue.js vuetify v-textarea无法在未扩展的v-layout中正确自动增长

5 个答案: