时间戳

首页 > 解决方案 > 使用 Vuetify 在自动完成下拉项中显示工具提示

javascript - 使用 Vuetify 在自动完成下拉项中显示工具提示

问题描述

我是 Vue.js 和 Vuetify 的新手

问题 - 在 v-autocomplete 中的每个下拉项上显示工具提示

解决方案 - 在项目模板中添加 v-tooltip 组件

代码：

var app = new Vue({
  el: "#app",
  data: {
    items: [{
        value: 0,
        text: "Matthews Webb"
      },
      {
        value: 1,
        text: "Teresa Ward"
      },
      {
        value: 2,
        text: "Cervantes Swanson"
      },
      {
        value: 3,
        text: "Helga Cooper"
      },
      {
        value: 4,
        text: "Solomon Jensen"
      },
      {
        value: 5,
        text: "Eliza Delgado"
      },
      {
        value: 6,
        text: "Dickson Parks"
      },
      {
        value: 7,
        text: "Etta Glenn"
      },
      {
        value: 8,
        text: "Alma Durham"
      },
      {
        value: 9,
        text: "Rosemary Conner"
      }
    ],
    selected: []
  }
});
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-autocomplete :items="items" v-model="selected" clearable multiple>
          <template v-slot:item="data">
            <v-tooltip right>
              <template slot="activator" slot-scope="{ on }">
                <v-list-tile-action>
                  <v-checkbox v-model="selected" :value="data.item.value"></v-checkbox>
                </v-list-tile-action>
                <v-list-tile-content>
                  <v-list-tile-title v-html="data.item.text" v-on="on"></v-list-tile-title>
                </v-list-tile-content>
              </template>
          <span>{{ data.item.text }}</span>
          </v-tooltip>
          </template>
        </v-autocomplete>
      </v-container>
    </v-content>
  </v-app>
</div>

实施方案后的问题：

  1. 如果单击复选框，则无法单击复选框或无法选择项目
  2. 在搜索项目时，某些复选框显示已选中

Vue 版本 - 2.6.12

Vuetify 版本 - 1.5.24

有没有其他方法可以在不干扰功能的情况下在自动完成下拉项目上显示工具提示，或者我的解决方案中有任何错误

标签： javascriptvue.jsvuetify.js

解决方案

解决方案：

div与选择控件的v-input--selection-controls__ripple输入框重叠；因此绑定到点击。为了解决这个问题，我应用了一个简单的 CSS Hack。position概念上通过使用z-index:-10div 将其置于上方。如下所示的编辑标记为/* <--------------- */

<div class="v-input__slot">
    <div class="v-input--selection-controls__input">
        <input aria-checked="false" role="checkbox" type="checkbox" value="1" style="
        position: relative; /* <--------------- */
        ">
        <div class="v-input--selection-controls__ripple" style="
        position: absolute; z-index: -10; /* <--------------- */        
        "></div>
        <i aria-hidden="true" class="v-icon material-icons theme--light">check_box_outline_blank</i>
    </div>
</div>

推荐阅读