如何禁用bootstrap-vue下拉菜单的主拆分按钮且保留下拉功能可用

解决方案 #

方案1：使用官方内置split-disabled属性（推荐） #

BootstrapVue的<b-dropdown>组件内置了专门用于禁用拆分按钮主按钮的属性split-disabled，开启后只会禁用左侧主按钮，完全不影响右侧下拉展开按钮的功能。
代码示例：

<div>
  <b-dropdown split text="Split Dropdown" class="m-2" split-disabled>
    <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>

如果需要动态控制禁用状态，直接绑定变量即可：:split-disabled="你的布尔变量"

方案2：使用split-button插槽自定义主按钮（适用于需要额外自定义的场景） #

你之前用的button-content插槽仅替换按钮内部文本内容，不会作用到按钮本身的属性，所以disabled不生效。如果需要对主按钮做更多自定义配置，可以直接替换整个拆分主按钮的split-button插槽，在插槽内自行添加禁用属性即可：

<div>
  <b-dropdown split class="m-2">
    <!-- 替换整个主拆分按钮，Vue2写法可改为 <template slot="split-button"> -->
    <template #split-button>
      <b-button disabled>Split Dropdown</b-button>
    </template>
    <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>

这种方式完全自主控制主按钮的状态，不会影响下拉展开功能。

内容的提问来源于stack exchange，提问作者Luciano