在下拉菜单中禁用主拆分按钮 bootstrap-vue

Question

我试图从 bootstrap-vue 下拉菜单中禁用主拆分按钮，但保持下拉组启用

这是来自 docs:

的最基本的示例代码

<div>
  <b-dropdown split text="Split Dropdown" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

通过在 <b-dropdown> 中设置 :disabled="true" 禁用整个按钮，我无法展开其他选项。

使用插槽 button-content 会忽略 disabled 属性这是有道理的，因为我覆盖的是内容而不是按钮本身。

<template slot="button-content" :disabled="true">Split Dropdown</template>

有办法实现吗？

Answer 1

尝试将 ref 添加到下拉列表，然后将 class 添加到按钮：

new Vue({
  el: "#demo",
  mounted() {
   this.$refs.spt.$refs.button.classList.add('disable')
  }
})

.disable {
  pointer-events: none; 
  background-color: #b2beb5 !important;
}

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="demo">
  <b-dropdown ref="spt" split text="Disabled Split" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

Answer 2

如本 discussion 中所建议，有一种无需额外代码即可实现此目的的更简单方法。

<b-button-group>
  <b-button disabled>Split dropdown</b-button>
  <b-dropdown>
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</b-button-group>

在下拉菜单中禁用主拆分按钮 bootstrap-vue

Disable main split button in dropdown bootstrap-vue

javascript

vue.js

dropdown

bootstrap-vue