Vuetify动态按钮无文本仍占空间，如何仅渲染图标？

问题场景 #

基于配置文件实现的Vuetify动态<v-btn>组件，text属性为可选项。当仅配置prepend-icon时，按钮会为空白文本预留空间，无法仅渲染图标。

现有代码：

<v-btn 
      :prepend-icon="`mdi-${value.prependIcon}`" 
      :append-icon="`mdi-${value.appendIcon}`">

{{value.text}}
</v-btn>

配置示例：

{ 
  text: "Button text", 
  prependIcon: "eye-circle",
  // 其他配置项
}

解决方法 #

方法1：条件渲染文本内容

通过v-if判断文本是否存在，仅当value.text有值时才渲染文本节点，避免空文本占据空间：

<v-btn 
      :prepend-icon="`mdi-${value.prependIcon}`" 
      :append-icon="`mdi-${value.appendIcon}`">
  <span v-if="value.text">{{ value.text }}</span>
</v-btn>

方法2：启用纯图标按钮模式

利用Vuetify的icon属性，动态切换按钮类型：当无文本时启用纯图标模式，按钮会自动适配图标尺寸，彻底消除文本预留空间；有文本时保持普通按钮样式：

<v-btn 
      :icon="!value.text"
      :prepend-icon="`mdi-${value.prependIcon}`" 
      :append-icon="`mdi-${value.appendIcon}`">
  {{ value.text || '' }}
</v-btn>

方法3：封装通用组件时的灵活处理

如果是封装通用<LinkButton>组件，可结合条件渲染和动态属性实现更灵活的控制：

<template>
  <v-btn 
        :prepend-icon="`mdi-${config.prependIcon}`" 
        :append-icon="`mdi-${config.appendIcon}`"
        :icon="!config.text">
    <span v-if="config.text">{{ config.text }}</span>
  </v-btn>
</template>

<script setup lang="ts">
const props = defineProps<{
  config: {
    text?: string;
    prependIcon?: string;
    appendIcon?: string;
  }
}>();
</script>

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