如何在Vue Bootstrap中实现鼠标悬停下拉菜单？

Question

如何在Vue Bootstrap中实现鼠标悬停下拉菜单？

6

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

当鼠标悬停在下拉按钮上时，应该显示出项目！

- Abdan

也许这个能帮到你 https://codepen.io/antcook/pen/OboxbO - Awais

3个回答

2

我根据 @pascal-lamers 的回答，为多个悬停下拉菜单制作了另一种解决方案。

如果您不想为此任务创建不同的组件，而是想在同一个导航元素中解决它，那么您需要定义多个“ref”，并为您的“onOver”和“onLeave”侦听器定义特定的“ref”。

<template>
    <div @mouseover="onOver('dropdown1')" @mouseleave="onLeave('dropdown1')">
        <b-dropdown id="dropdown-1" text="Dropdown Button" ref="dropdown1" 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>
    <div @mouseover="onOver('dropdown2')" @mouseleave="onLeave('dropdown2')">
        <b-dropdown id="dropdown-2" text="Dropdown Button" ref="dropdown2" class="m-md-2">
            <b-dropdown-item>Fourth Action</b-dropdown-item>
            <b-dropdown-item>Fifth Action</b-dropdown-item>
            <b-dropdown-item>Sixth Action</b-dropdown-item>
        </b-dropdown>
    </div>
</template>

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

- vdavid

1

您还可以在bootstrap-vue v2.5.0中使用v-b-hover指令。https://bootstrap-vue.org/docs/directives/hover

来自bootstrap-vue的示例:

<template>
  <div v-b-hover="hoverHandler"> ... </div>
</template>

<script>
  export default {
    methods: {
      hoverHandler(isHovered) {
        if (isHovered) {
          // Do something
        } else {
          // Do something else
        }
      }
    }
  }
</script>

- Tùng Nguyễn

1

请在您的答案中添加更多详细信息，例如工作代码或文档引用。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pascal Lamers · Accepted Answer

虽然不像我想的那么简单，但这里有一个示例，演示如何将此Bootstrap下拉菜单转换为可悬停下拉菜单。

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

这个想法是在一个包装的 div 上使用 mouseover 和 mouseleave 的 v-on 指令（一些情况下，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中包含到新组件中。以下是一个可以正常工作的示例：https://codesandbox.io/s/romantic-elgamal-lol7h