Vue实现鼠标移入移出表格，显示影藏图标并弹出提示内容

2024-01-10 22:05:36

简介

在Vue中，我们可以使用v-show指令来显示或隐藏元素。当鼠标移入表格单元格时，我们可以使用v-show指令显示图标。当鼠标移出表格单元格时，我们可以使用v-show指令隐藏图标。此外，我们还可以使用v-tooltip指令来显示提示内容。

实现步骤

在表格中添加v-show指令

<tr v-for="item in items" @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave">
  <td>{{ item.name }}</td>
  <td>{{ item.age }}</td>
  <td v-show="showIcon">{{ item.icon }}</td>
</tr>

在 Vue 实例中定义showIcon数据

data() {
  return {
    items: [
      { name: 'John', age: 30, icon: '👍' },
      { name: 'Jane', age: 25, icon: '👎' },
      { name: 'Tom', age: 40, icon: '🤔' },
    ],
    showIcon: false,
  };
},

在 Vue 实例中定义mouseEnter和mouseLeave方法

methods: {
  mouseEnter() {
    this.showIcon = true;
  },
  mouseLeave() {
    this.showIcon = false;
  },
},

在表格中添加v-tooltip指令

<tr v-for="item in items" @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave">
  <td>{{ item.name }}</td>
  <td>{{ item.age }}</td>
  <td v-show="showIcon">{{ item.icon }}</td>
  <td v-tooltip.bottom="item.tooltip">提示</td>
</tr>

在 Vue 实例中定义item.tooltip数据

data() {
  return {
    items: [
      { name: 'John', age: 30, icon: '👍', tooltip: 'This is John.' },
      { name: 'Jane', age: 25, icon: '👎', tooltip: 'This is Jane.' },
      { name: 'Tom', age: 40, icon: '🤔', tooltip: 'This is Tom.' },
    ],
  };
},