如何在Vuetify的v-text-field中为清除图标添加v-tooltip

方法一：利用插槽自定义清除图标（推荐） #

通过append-inner插槽组合清除图标与tooltip，依赖官方API，兼容性和稳定性更强。

具体实现代码：

<template>
  <v-text-field
    v-model="inputValue"
    label="输入内容"
    :clearable="false" <!-- 关闭默认清除按钮 -->
  >
    <template v-slot:append-inner>
      <!-- 可通过top/bottom/left/right调整tooltip显示位置 -->
      <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-icon
            v-if="inputValue" <!-- 仅输入框有值时显示清除图标 -->
            v-bind="attrs"
            v-on="on"
            @click="inputValue = ''"
            class="mr-2"
            color="grey"
          >
            mdi-close-circle
          </v-icon>
        </template>
        <span>清除输入内容</span>
      </v-tooltip>
    </template>
  </v-text-field>
</template>

<script setup>
import { ref } from 'vue'
const inputValue = ref('')
</script>

方法二：通过DOM操作给默认清除图标加Tooltip #

如果不想自定义图标，可通过ref获取默认清除图标元素，手动绑定tooltip。注意：该方式依赖Vuetify的DOM结构，版本更新可能导致失效。

具体实现代码：

<template>
  <v-text-field
    ref="textFieldRef"
    v-model="inputValue"
    label="输入内容"
    clearable
  ></v-text-field>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { VTooltip } from 'vuetify/components'

const inputValue = ref('')
const textFieldRef = ref(null)

onMounted(() => {
  // 获取默认清除图标元素
  const clearIcon = textFieldRef.value?.$el.querySelector('.v-input__icon--clear')
  if (clearIcon) {
    // 创建并挂载tooltip实例
    new VTooltip({
      target: clearIcon,
      props: {
        content: '清除输入内容',
        location: 'bottom'
      }
    })
  }
})
</script>

注意事项 #

• 可根据页面布局调整tooltip的location属性，确保提示框显示在合适位置
• 方法一中通过v-if="inputValue"控制图标显示，避免输入框为空时出现多余图标
• 若使用Vue 2版本，需将<script setup>改为选项式API写法

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