如何在虚拟引导中启用悬停下拉？

没有我想象的那么直截了当，但是这里有一个例子说明如何将这个引导下拉菜单转换成一个可悬停的下拉菜单。

<template>
  <div @mouseover="onOver" @mouseleave="onLeave">
    <b-dropdown id="dropdown-1" text="Dropdown Button" ref="dropdown" class="m-md-2">
       <b-dropdown-item>First Action</b-dropdown-item>
       <b-dropdown-item>Second Action</b-dropdown-item>
       <b-dropdown-item>Third Action</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
  export default {
    methods: {
      onOver() {
        this.$refs.dropdown.visible = true;
      },
      onLeave() {
        this.$refs.dropdown.visible = false;
      }
    }
  }
</script>

一个工作例子 链接地址https://codesandbox.io/s/2erqk