时间戳

首页 > 解决方案 > V-tooltip: 从方法中关闭 Popover

vue.js - V-tooltip: 从方法中关闭 Popover

问题描述

在 VueJS 中，我使用 v-tooltip ( https://github.com/Akryum/v-tooltip ) 来制作弹出框。

为了关闭弹出窗口，他们提供了一个名为的指令'v-close-popover'，我可以将其分配给弹出窗口内的按钮/链接以关闭弹出窗口。这很好用。

但是，我有一个要求，我需要从 Vue 方法中关闭此弹出窗口。但我不知道如何从该方法触发关闭弹出窗口。

标签： vue.jsvuejs2

解决方案

这就是您实现此目的的方法。它将在 mouseOver 事件上显示工具提示并在 mouseLeave 事件上删除。在模板->

  <i
      id="requiredIcon"
      aria-hidden="true"
      v-tooltip="{content: 'Required option is not available for this question.', show: isOpen, trigger: 'manual'}"
      @mouseover="showTooltip"
      @mouseleave="removeTooltip"
    ></i>

在脚本->

   data() {
        return {
          isOpen: false,
        };
      },
methods:{
    showTooltip() {
            this.isOpen = true;
        },
     removeTooltip() {
          this.isOpen = false;
        }
}

推荐阅读