javascript - 如何在 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>

The items should be shown when the dropdown button is hovered!

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-on 指令 mouseover和 mouseleave在包装器 div 上(不知何故，vue 指令不能直接在 b-vue 组件上工作，但可能只有我一个人)。然后使用事件触发器改变 dropdown.visible状态。同样在这个例子中，我使用了 Vue 的 $refs获取脚本中的下拉菜单。
工作示例 https://codesandbox.io/s/2erqk

多个悬停下拉菜单
如果您打算一次在多个下拉列表中使用此行为，我会遇到麻烦从中创建一个组件 - 将 b-dropdown 合并到一个新组件中。

<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 的事件和 Prop 。进入新组件。这是一个工作示例: https://codesandbox.io/s/romantic-elgamal-lol7h