Disable main split button in dropdown bootstrap-vue-CodePudding

I'm trying to disable the main split button from a bootstrap-vue dropdown but keep the dropdown group enabled

This is the most basic sample code from the 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>

By setting :disabled="true" in <b-dropdown> disables the whole button and I'm not able to expand the other options.

Using the slot button-content ignores the disabled property which makes sense because I'm overwriting the content and not the button itself.

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

Is there a way to achieve this?

CodePudding user response：

Try to add ref to dropdown and then add class to button:

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,IntersectionObserver" 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>

CodePudding user response：

As suggested in this discussion, there is an easier way to achieve this with no extra code.

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