时间戳

首页 > 解决方案 > 如何在 vue bootstrap 中启用悬停下拉菜单？

javascript - 如何在 vue bootstrap 中启用悬停下拉菜单？

问题描述

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

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

标签： javascripthtmlcssvue.js

解决方案

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

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

mouseover这个想法是在包装器 div上使用 v-on 指令mouseleave（不知何故，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

推荐阅读