使用 v-tooltip (vuetify) 使工具提示在 v-text-field 中显示清晰的图标

Answer 1

将透明图标的类（示例中为

.v-field__clearable

或

.search-input .v-field__clearable

）传递给 v-tooltip 的

:activator

属性：

<v-tooltip activator=".v-field__clearable">clear input</v-tooltip>

在代码片段中查看它是如何工作的：

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  template: `
      <v-app>
        <v-main>
          <v-text-field
            v-model="msg"
            class="search-input"
            clearable
          />
          <v-tooltip activator=".search-input .v-field__clearable">
              clear it
          </v-tooltip>
        </v-main>
      </v-app>
  `,
  setup(){
    return {
      msg: ref('hello world')
    }
  }

}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>