【问题标题】:Show Tooltip icon next to textfield label using Vuetify使用 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."
/>

【问题讨论】:

    标签: vue.js tooltip vuetify.js


    【解决方案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>

    【讨论】:

      猜你喜欢
      • 2020-05-20
      • 2018-09-21
      • 2021-09-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-06-01
      • 1970-01-01
      相关资源
      最近更新 更多