在下拉 bootstrap-vue 中禁用主拆分按钮答案

【问题标题】：Disable main split button in dropdown bootstrap-vue在下拉 bootstrap-vue 中禁用主拆分按钮
【发布时间】：2021-11-19 21:49:48
【问题描述】：

我正在尝试从 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>

有没有办法做到这一点？

【问题讨论】：

标签： javascript vue.js dropdown bootstrap-vue

【解决方案1】：

尝试将ref添加到下拉菜单，然后将类添加到按钮：

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>

【讨论】：

【解决方案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>

【讨论】：