使用 Vuetify 在文本字段标签旁边显示工具提示图标

Posted 2023-02-22

【中文标题】使用 Vuetify 在文本字段标签旁边显示工具提示图标

【英文标题】：Show Tooltip icon next to textfield label using Vuetify

【发布时间】：2020-05-22 16:38:59

【问题描述】：

我正在使用 vuetify 的组件工具提示。但我不确定如何在标签旁边实施它。

这就是我现在的样子。

<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>

我想在信息标签旁边显示工具提示图标。请建议我如何实现这一目标。

更新 1

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

更新 2

<v-text-field
  v-model="dummy.info"
  label='Information'
  append-icon="info"
  suffix="Please enter the user information correctly."
/>

【参考方案1】：

您可以使用append 插槽将内容附加到v-text-field。

    <v-text-field label="Prepend" prepend-icon="mdi-map-marker" />

https://vuetifyjs.com/en/components/text-fields#api

<v-text-field>
  <template v-slot:append>
    <v-icon slot="activator" dark color="primary">info</v-icon>
    <span>Please enter the user information correctly.</span>
  </template>
</v-text-field>

对于 Vuetify 1.xx

<v-text-field
  v-model="dummy.info"
  label="Information"
  append-icon="info"
  suffix="Please enter the user information correctly."
/>

https://v1.vuetifyjs.com/en/components/text-fields#example-prefixes-and-suffixes https://v1.vuetifyjs.com/en/components/text-fields#example-icon

【讨论】：

请检查更新1，我按照你的建议做了。但是现在图标根本没有出现

我在一个 Vuetify 项目上对其进行了测试，它可以工作。你有什么版本的 Vuetify？

"vuetify": "^1.0.5"

我明白了。此版本需要不同的语法。见上文

这个解决方案部分工作 - 它显示工具提示，但在表单字段之后，而不是在用户请求的标签之后，我希望也能这样做......还有什么帮助吗？

【参考方案2】：

这个 sn-p 应该适合你...

new Vue(
  el: '#app',
  vuetify: new Vuetify(),
)

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&ext=.css" rel="stylesheet" />
<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>
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-text-field>
          <template v-slot:label>
            What about <strong>icon</strong> here? 
            <v-tooltip bottom>
              <template #activator=" on, attrs ">
                <v-icon class="mb-2" small v-on="on" v-bind="attrs" style="vertical-align: middle">
                  mdi-information
                </v-icon>
              </template> And here is the information...
          </v-tooltip>
          </template>
        </v-text-field>
      </v-container>
    </v-main>
  </v-app>
</div>