Vuetify text-area 在自定义组件插槽内滚动功能失效问题求助

算力阿峰

2026-4-13

兄弟我太懂你这种踩Vuetify组件插槽坑的郁闷了！你用Vue3 Composition API加Vuetify写了个带标题栏的自定义容器组件，结果把v-text-area塞到这个组件的插槽里之后，滚动功能直接罢工了是吧？我之前也栽过类似的跟头，给你几个亲测有效的排查和解决方向：

首先先确认你的自定义组件的插槽写法是对的——看你贴的代码只写到v-card开头，正常带插槽的结构应该是这样的，先把这块补全好：

// CustomComponent <script setup lang="ts">
import type { PropType } from 'vue'

defineProps({
  title: {
    type: String as PropType<string>,
    required: false,
  },
})
</script>

<template>
  <v-card class="pa-0 ma-2 elevation-2 no-click">
    <!-- 标题栏部分 -->
    <v-card-title v-if="title" class="pa-2">
      {{ title }}
    </v-card-title>
    <!-- 重点：必须用默认插槽承载外部传入的v-text-area -->
    <v-card-text class="pa-2">
      <slot />
    </v-card-text>
  </v-card>
</template>

接下来给你列几个最可能的问题点和解决办法：

父容器样式截断了滚动：Vuetify的v-card-text默认可能会有overflow: hidden的样式，或者没有设置明确高度，导致内部的v-text-area滚动被父容器卡主。你可以给v-card-text加固定高度和滚动相关的样式，比如：
```
<v-card-text class="pa-2 overflow-y-auto" style="height: 300px;">
  <slot />
</v-card-text>
```
用Vuetify内置的overflow-y-auto类，只有当内容超过容器高度时才会显示垂直滚动条，比直接写行内样式更贴合框架规范。
v-text-area自身没设置可滚动空间：如果你的v-text-area既没设height也没设rows属性，它会自动撑开父容器，根本触发不了滚动。你可以给它加个初始行数或者固定高度：
```
<v-text-area
  v-model="yourContent"
  label="输入内容"
  rows="8"
  class="overflow-y-auto"
/>
```
自定义类的样式冲突：你给v-card加的no-click类，有没有写pointer-events: none这种属性？虽然这个主要影响点击，但有时候会间接干扰滚动事件的传递，要是这个类没特别必要可以先删掉试试，排查是不是样式冲突的问题。

最后给你个小技巧：打开浏览器开发者工具，选中v-text-area的父容器（也就是自定义组件里的v-card-text），去看它的计算样式，重点查height和overflow这两个属性，大概率是其中一个属性把滚动给禁用了。我之前就是因为没给插槽容器加overflow-y-auto，导致v-text-area直接把父容器撑爆，完全触发不了滚动，调完样式就正常了，你可以先试试这些方法！

备注：内容来源于stack exchange，提问作者Ethan