仅显示悬停<v-icon>在 Vuetify 数据表中

Question

我有一个 Vuetify 数据表，分别带有标题和数据字段，在 props.item.name 我添加了一个 v 图标，但我只想在我将鼠标悬停在相应字段上时显示该图标。 默认情况下它不应该出现。

我已经添加了下面的代码和脚本和 HTML。

这是一支笔

关于如何实现这一目标的任何帮助将不胜感激。

 new Vue({ el: '#app', data() { return { headers: [{ text: 'Dessert (100g serving)', align: 'left', sortable: false, value: 'name' }, { text: 'Calories', value: 'calories' }, { text: 'Fat (g)', value: 'fat' }, { text: 'Carbs (g)', value: 'carbs' }, { text: 'Protein (g)', value: 'protein' }, { text: 'Iron (%)', value: 'iron' } ], desserts: [{ name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: '1%' }, { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, iron: '1%' }, { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, iron: '7%' }, { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, iron: '8%' }, ] } } })

 <link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.18/dist/vuetify.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.18/dist/vuetify.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <v-app id="inspire"> <v-data-table :headers="headers" :items="desserts" class="elevation-1"> <template v-slot:items="props"> <td>{{ props.item.name }} <v-icon right>cake</v-icon></td> <td>{{ props.item.calories }}</td> <td>{{ props.item.fat }}</td> <td>{{ props.item.carbs }}</td> <td>{{ props.item.protein }}</td> <td>{{ props.item.iron }}</td> </template> </v-data-table> </v-app> </div>

Answer 1

添加一个名为c_index （当前索引）的数据属性，当您将鼠标悬停在行上时，您将悬停的索引分配给c_index并在鼠标离开时将其重置为 -1：

  <tr @mouseover="c_index=props.index" @mouseleave="c_index=-1">

并有条件地显示该图标，例如：

  <v-icon right v-show="props.index==c_index">cake</v-icon>

Full Demo

Answer 2

你最好的选择是 CSS

_ 在v-icon悬停上：

.v-data-table .v-icon{visibility:hidden}
.v-data-table .v-icon:hover{visibility:visible}

_ 在td容器悬停

.v-data-table td .v-icon{visibility:hidden}
.v-data-table td:hover .v-icon:hover{visibility:visible}

这将影响模板中的所有v-icon ，更准确地说，向要隐藏的v-icon添加一个类。

...
<v-icon class="hidden" ... />
...

.hidden{visibility:hidden}
.hidden:hover{visibility:visible}

或者

...
<td class="hidden" >
     <v-icon ...>
...
</td>
...

.hidden .v-icon{visibility:hidden}
.hidden:hover .v-icon{visibility:visible}

Answer 3

使用v-hover组件，在数据表的v-slot:item.column_name内，您可以通过其v-slot传递一个 prop，并像这样使用它：

<template v-slot:item.action="{ item }">
    <v-hover v-slot:default="{ hover }">
        <v-badge
          :value="hover"          
          color="deep-purple accent-4"
          content="First Button"
          left
          transition="slide-x-transition"
         >
             <v-icon>mdi-fountain-pen-tip</v-icon>
         </v-badge>
    </v-hover>
</template>

您也可以将 v-hover 与 css 一起使用，但您必须固定位置。 完整演示