VueJS下如何让v-chip-group仅随内容增高、移除内容保留最大高度

核心逻辑是跟踪组件达到过的最大高度，用min-height属性固定这个高度作为下限，这样内容减少时组件不会收缩到低于该值。具体步骤如下：

1. 定义响应式变量存储最大高度
   初始化maxHeight为0，用来记录组件历史最高高度。

2. 监听组件尺寸变化，更新最大高度

   • 可以监听芯片数组的变化，也可以用ResizeObserver直接监听组件DOM的尺寸变化（后者更精准，能覆盖所有导致高度变化的场景）。
   • 注意：Vuetify组件的ref指向的是组件实例，需要通过$el访问真实DOM元素才能获取clientHeight。

3. 用min-height绑定最大高度
   将maxHeight绑定到v-chip-group的样式中，设置min-height为该值，确保组件高度不会低于记录的最大值。

完整代码示例（Vue 3 + Vuetify） #

<template>
  <v-chip-group 
    ref="chipGroup" 
    :style="{ minHeight: `${maxHeight}px` }"
  >
    <v-chip 
      v-for="item in chips" 
      :key="item.id" 
      closable 
      @close="removeChip(item.id)"
    >
      {{ item.label }}
    </v-chip>
  </v-chip-group>
  <v-btn class="mt-2" @click="addChip">添加芯片</v-btn>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue'

const chips = ref([
  { id: 1, label: '芯片1' },
  { id: 2, label: '芯片2' },
  { id: 3, label: '芯片3' }
])
const chipGroup = ref(null)
const maxHeight = ref(0)

// 添加芯片
const addChip = () => {
  chips.value.push({ 
    id: Date.now(), 
    label: `芯片${chips.value.length + 1}` 
  })
}

// 移除芯片
const removeChip = (id) => {
  chips.value = chips.value.filter(item => item.id !== id)
}

// 更新最大高度（监听数组变化时调用）
const updateMaxHeight = async () => {
  await nextTick() // 等待DOM更新完成
  if (!chipGroup.value) return
  const currentHeight = chipGroup.value.$el.clientHeight
  if (currentHeight > maxHeight.value) {
    maxHeight.value = currentHeight
  }
}

// 监听芯片数组变化，初始化时也执行一次
watch(chips, updateMaxHeight, { immediate: true })

// 可选：用ResizeObserver监听DOM尺寸变化，覆盖所有高度变化场景
onMounted(() => {
  if (!chipGroup.value) return
  const observer = new ResizeObserver(entries => {
    entries.forEach(entry => {
      const currentHeight = entry.contentRect.height
      if (currentHeight > maxHeight.value) {
        maxHeight.value = currentHeight
      }
    })
  })
  observer.observe(chipGroup.value.$el)
})
</script>

关键细节说明 #

• 为什么flex-shrink/flex-grow没用？因为这些属性控制的是flex容器内子元素的伸缩规则，而我们需要的是固定容器自身的最小高度，min-height才是直接作用于容器高度下限的属性。
• 关于clientHeight无法访问：因为Vuetify组件的ref返回的是组件实例，不是原生DOM节点，必须通过$el属性获取真实DOM才能读取clientHeight。
• ResizeObserver的优势：不仅能监听数组增减导致的高度变化，还能处理芯片文字长度变化、窗口缩放等场景，更健壮。

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