当鼠标悬停在Vue上的图标上时弹出显示文本框

Question

我正在做一个个人项目，我需要获取一个单元内所有设备的状态。 此状态以及设备名称从 function deviceStatus()以数组形式返回。 如果所有设备都ON ，unit.id 旁边的主页图标将变为绿色。 如果该单元内的所有设备都OFF ，则主页图标将变为红色。 该代码运行良好，如下所示。

我正在寻找帮助来显示从deviceStatus()返回的数组，因为当鼠标悬停在“主页”图标上时会弹出文本框。 我对mouseover事件感到非常困惑，任何帮助将不胜感激。

<template>
  <div>
    <div class="d-flex flex-row align-items-center py-2 px-2">
      <h1 class="display-1 unit-status m-0">{{ unit ? unit.id : null }}</h1>
      <font-awesome-icon
          icon="home"
          :style="deviceStyling"
          class="tab-icon mx-2"
          size="lg"
          id="unit-info"/>
    </div>
</template>

<script>

export default {

  computed: {
    deviceStatus() {
      const device = this.unitDvc(this.currentSite.id);
      return device.map(dv => {
        const status = this.deviceStat(dv.device_id);
        return { name: dv.name, status };
      });
    },
    deviceStyling() {
      var turnedOn = null;
      var turnedOff = null;
      for (var i = 0; i < this.deviceStatus.length; i++) {
        if (this.deviceStatus[i]['state'] == 'on') {
          turnedOn = turnedOn + 1;
        } else {
          turnedOff = turnedOff + 1;
        }
      }
      if (turnedOn == this.deviceStatus.length) {
        return { 'color': `green` };
      } else if (turnedOff == this.deviceStatus.length) {
        return { 'color': `red` };
      }

    }
  },
</script>

Answer 1

确保已经安装了 v-tooltip 依赖

npm install --save v-tooltip

并添加到您的应用中

import Vue from 'vue'
import VTooltip from 'v-tooltip'

Vue.use(VTooltip)

然后你可以将指令添加到你的组件中：

<font-awesome-icon
          v-tooltip="'Status is ' + deviceStatus.name"
          icon="home"
          :style="deviceStyling"
          class="tab-icon mx-2"
          size="lg"
          id="unit-info"/>

Answer 2

正如您提到的，您正在使用 HTML 和 JavaScript，您可以使用 HTML 的简单属性，即TITLE 。 它就像mouseover一样工作。

更多信息： 标题 - MDN