Question

我需要创建文本字段的帮助，该文本字段的内部有一个图标，并在该图标上附加了工具提示。我的代码：

<v-text-field
                    v-model="url">
                  <span slot="label">Url
                   <v-tooltip bottom>
                      <v-icon
                        slot="activator"
                        color="primary"
                        dark
                      >home</v-icon>
                      <span>Tooltip</span>
                    </v-tooltip>
                   </span>
               </v-text-field>

有什么想法吗？

谢谢。

Answer 1

由于v1.1，我们可以为此使用append（和prepend）插槽：

<v-text-field v-model="url" label="URL">
    <v-tooltip slot="append" bottom>
        <v-icon slot="activator" color="primary" dark>home</v-icon>
        <span>Tooltip</span>
    </v-tooltip>
</v-text-field>

Codepen

Answer 2

在vuetify版本2.0.7中，我正在使用以下代码。效果很好。

      <v-tooltip bottom>
        <template #activator="{ on }">
          <v-icon color="red" class="mr-1" v-on="on">fab fa-youtube</v-icon>
        </template>
        <span>Tooltip</span>
      </v-tooltip>

Answer 3

将鼠标悬停在v-text-field内的图标上时显示工具提示

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-text-field v-model="url" label="URL">
          <v-tooltip slot="append">
            <template v-slot:activator="{ on }">
                <v-icon v-on="on" color="primary" dark>
                  mdi-home
                </v-icon>
              </template>
            <span>Tooltip</span>
          </v-tooltip>
        </v-text-field>
      </v-container>
    </v-content>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
      url: 'https://stackoverflow.com/'
    }
  })
</script>

在文本字段内用v-tooltip包裹v-icon？

3 个答案: