Vue.js 使用VTOOLTIP(实例化)使工具提示在V文本字段中显示清晰的图标

发布于11月06日

我对为v-text-field中的清除图标创建工具提示很感兴趣.您能就如何实现这一点提供指导吗？

          <v-text-field
            ref="newSearchField"
            v-model="text"
            class="search-input"
            :class="{
              'rounded-r-lg': $vuetify.breakpoint.smAndDown,
              'rounded-l-lg': $vuetify.breakpoint.xsOnly
            }"
            type="text"
            solo
            :label="label"
            :disabled="disabled"
            :placeholder="label"
            persistent-placeholder
            autofocus
            data-test="search-input"
            hide-details
            clearable
            autocomplete="off"
            @keyup="nextItem"
            @click:clear="
              clear()
              $nuxt.$data.layoutName === 'home' ? (text = '') : $emit('clear')
            "
            @input="autocomplete"
            @keydown="blured = false"
            @focus="blured = false"
          >

推荐答案

将清除图标的职业(.v-field__clearable)传递给v-tooltip的:activatorprops :

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

确保 Select 器引用单个元素，例如，通过在v文本字段上使用一个类(在您的示例中，您可以使用.search-input .v-field__clearable).

查看它在代码片段中的工作方式:

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>