【问题标题】:Wrapping v-icon with v-tooltip inside text-field?在文本字段中用 v-tooltip 包装 v-icon?
【发布时间】:2018-07-02 11:21:27
【问题描述】:

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

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

有什么想法吗?

谢谢。

【问题讨论】:

    标签: vuetify.js


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

    【讨论】:

    • @rustyx 已编辑,感谢您的提醒。 Pen 使用的是最新的 vuetify 版本,vuetify v2 发生了很大变化,所以 pen 坏了。
    【解决方案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>
    

    【讨论】:

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

      【讨论】:

        猜你喜欢
        • 2021-02-09
        • 2020-01-24
        • 1970-01-01
        • 1970-01-01
        • 2021-11-02
        • 1970-01-01
        • 2018-09-14
        • 2019-08-01
        • 1970-01-01
        相关资源
        最近更新 更多