如何在 vue bootstrap 悬停时启用下拉菜单？

Question

<div>
  <b-dropdown id="dropdown-1" text="Dropdown Button" 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-divider></b-dropdown-divider>
  <b-dropdown-item active>Active action</b-dropdown-item>
  <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

悬停下拉按钮时应显示项目！

Answer 1

不像我想的那么直接，但这里有一个关于如何将此引导下拉列表转换为可悬停下拉列表的示例。

<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>

我们的想法是使用V-的指令mouseover，并mouseleave在包装DIV（不知何故VUE指令直接没有了B-VUE组件上工作，但可能只是我）。然后使用事件触发器来改变dropdown.visible状态。同样在这个例子中，我使用 Vue$refs来获取脚本中的下拉列表。

工作示例 https://codesandbox.io/s/2erqk

多个悬停下拉菜单

如果您计划一次在多个下拉列表中使用此行为，我会遇到从它创建组件的麻烦 - 将 b-下拉列表合并到一个新组件中。

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

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

然后像这样使用它：

<template>
  <div>
    <b-dropdown-hover>
       <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-hover>
    <b-dropdown-hover>
       <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-hover>
  </div>
</template>
<script>

  import BDropdownHover from '@/components/BDropdownHover'

  export default {
    components : {
      BDropdownHover
    }
  }
</script>

但是您还必须将您需要的所有事件和道具包含b-dropdown到新组件中。这是一个工作示例：https : //codesandbox.io/s/romantic-elgamal-lol7h