使用 bootstrap-vue 下拉 div 元素答案

【问题标题】：Dropdown on div element with bootstrap-vue使用 bootstrap-vue 下拉 div 元素
【发布时间】：2018-06-16 08:25:01
【问题描述】：

我真的不喜欢 bootstrap-vue...我有一些问题，是否可以创建这样的东西？

<div class="dropdown open">
    <div data-toggle="dropdown" class="dropdown-toggle">some text</div> 
    <div class="dropdown-menu">
        <div class="row">
            <div id="left_side" class="col-lg-6">
                <label class="checkbox">
                    <input type="checkbox" value="aaa">AAA</label> 
                <label class="checkbox">
                    <input type="checkbox" value="bbb">BBB</label>
            </div> 
            <div id="right_side" class="col-lg-6">some text</div>
        </div>
    </div>
</div>

我尝试了很多选项，但 <b-dropdown> 总是创建 <button> 标签

【问题讨论】：

为什么不按照您想要的方式设置按钮的样式？您可以向其添加 class 并设置样式
如果 Vue-Bootstrap 不提供您需要的功能...为什么不直接使用您在问题中粘贴的代码？ :)
@Ohgodwhy 我正在尝试重新设置按钮本身的样式，但发现它很烦人，因为 btn 和 btn-primary 类应用的按钮样式会自动应用，即使您将标签更改为.

标签： twitter-bootstrap vue.js bootstrap-vue

【解决方案1】：

也许可以提供您使用 bootstrap-vue 的示例。下拉组件具有 DD 项和 DD 项按钮的子组件。 https://bootstrap-vue.js.org/docs/components/dropdown

【讨论】：

【解决方案2】：

不是button 或a 的元素对可访问性不友好（它们对屏幕阅读器用户没有正确的语义含义）。

您应始终尽可能使用语义元素，并应用样式以使它们按您的需要出现。

为什么使用div 不传达“可点击”，而button 总是传达它是一个可点击元素，具有屏幕阅读器用户或仅键盘用户所期望的相同点击和键盘行为。

BootstarpVue 为b-dropdown 提供了各种道具来控制触发按钮（或导航栏中的锚标记）上的样式。

文档可在https://bootstrap-vue.js.org/docs/components/dropdown获取

【讨论】：