Question

如何更改b-dropdown-component组件中b-dropdown-item-button的行为，以使其在单击时不会自动关闭？

该下拉菜单的语法结构如下：

<b-dropdown>
    <b-dropdown-item-button>
        <span>Mark as read</span>
    <b-dropdown-item-button>

    <b-dropdown-group>
// Messages are output here
    </b-dropdown-group>
</bdropdown>

现在，我想知道如何在单击b-dropdown-item-button时如何防止下拉菜单关闭。

Answer 1

在@click.native.capture.stop的任何子组件上放置<b-dropdown>指令将阻止其关闭下拉菜单。

例如：

<b-dropdown>
  <b-dropdown-item-button @click.native.capture.stop>
    <span>Mark as read</span>
  <b-dropdown-item-button>

  <b-dropdown-group @click.native.capture.stop>
    // no click will exit the parent, therefore they won't close the dropdown
  </b-dropdown-group>
</bdropdown>

Answer 2

首先：提供您要保持显示的参考（即b-drowpdown）

然后创建一个onClick函数，该函数将在单击按钮时起作用

最终会显示this。$ refs.dropdown.show（true）下拉列表，该列表会覆盖默认设置

<template>
    <b-dropdown ref="dropdown">
        <b-dropdown-item-button @click="onClick">
            <span>Mark as read</span>
        <b-dropdown-item-button>

        <b-dropdown-group>
    // Messages are output here
        </b-dropdown-group>
    </b-dropdown>
</template>
<script>
  export default {
    methods: {
      onClick() {
        this.$refs.dropdown.show(true)
      }
    }
  }
</script>

防止单击后关闭Vue引导程序下拉列表

2 个答案: