Question

我正在使用Vuetify工具提示组件。我想在标签后立即显示工具提示图标。我不确定该怎么做。请帮我弄清楚。现在，该图标如图1所示。

我想在信息文本之后输入

。

             <v-container fluid>
              <v-layout row wrap>
                <v-flex xs11 md6 class="add-col-padding-right">
                    <v-text-field 
                            label='Information'
                            v-model='dummy.info'
                            >
                    </v-text-field>
                </v-flex>
                <v-flex xs1 md6 class="add-col-padding-left">
                  <v-tooltip attach>
                    <a href='javascript:void(0);' slot="activator">
                      <i class="material-icons icon-black">
                        info
                      </i>
                    </a>
                    <span>Please enter the user information correctly.</span>
                  </v-tooltip>
                </v-flex>
              </v-layout>
            </v-container>

更新

<v-text-field 
 label='Information'
 v-model='dummy.info'
 >
 <template v-slot:append>
  <v-tooltip bottom>
   <template #activator="{on}">
    <v-icon v-on="on">mdi-pencil</v-icon>
   </template>
  </v-tooltip>
 </template>
</v-text-field>

更新2

如果我将v-tooltip放入其中，则它不起作用。我希望图标紧随信息之后。

<v-tooltip right>
 <v-icon slot="activator" dark color="primary">info</v-icon>
 <span>Please enter the user information correctly.</span>
</v-tooltip>
<v-text-field 
   label='Information'
   v-model='dummy.info'
   >
</v-text-field>

Answer 1

为append组件使用v-text-field插槽。在v-text-field组件内部，这应该对您有用：

<template v-slot:append>
  <v-tooltip bottom>
     <template #activator="{on}">
        <v-icon v-on="on">mdi-pencil</v-icon>
     </template>
  <v-tooltip>
</template>

编辑：您可能没有像我一样使用Vuetify配置材料设计图标。

尝试这个，对不起您的困惑。

<v-text-field>
  <template v-slot:append>
    <v-tooltip bottom>
      <template v-slot:activator="{on}">
        <v-btn v-on="on">test</v-btn>
      </template>
      <span>Hello World</span>
    </v-tooltip>
  </template>
</v-text-field>

这应该在文本字段的末尾添加一个v-btn，其工具提示为“ Hello World”

使用vuetify在标签后立即显示工具提示图标

1 个答案: