Javascript 如何在vue引导中启用悬停下拉菜单？ 第一个动作 第二个动作 第三个行动 积极行动 残疾行动

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

---

并不像我想的那样严格，但这里有一个例子，说明如何将这个引导下拉列表转换为可悬停下拉列表

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

然后像这样使用它：

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

第一个动作
第二个动作
第三个行动
第一个动作
第二个动作
第三个行动
从“@/components/BDROPDownhave”导入BDROPDownhave
导出默认值{
组成部分：{
向下悬停
}
}

---

但是，您还必须将

b-dropdown

中需要的所有事件和道具包含到新组件中。这里有一个工作示例：

这可能会有帮助，很高兴我能帮助@Abdan，你能把我的答案标记为正确的吗？如果你想直接在b下拉组件上使用这些指令，你可以在末尾添加本机修饰符（例如@mouseover.native=“onOver”），如果我有多个b下拉列表，我该如何实现？我可以像检查（this.$refs==dropdown1）一样检查它吗？@YasinDemirkaya我更新了我的答案

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