时间戳

首页 > 解决方案 > 在下拉 bootstrap-vue 中禁用主拆分按钮

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

问题描述

我正在尝试从 bootstrap-vue 下拉列表中禁用主拆分按钮，但保持下拉组启用

这是文档中最基本的示例代码：

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

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

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

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

有没有办法做到这一点？

标签： javascriptvue.jsdropdownbootstrap-vue

解决方案

尝试添加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>

推荐阅读