如何从 Vue bootstrap 下拉菜单中隐藏按钮和下拉箭头？答案

【问题标题】：How do I hide button and drop down arrow from Vue bootstrap dropdown?如何从 Vue bootstrap 下拉菜单中隐藏按钮和下拉箭头？
【发布时间】：2021-06-06 01:27:42
【问题描述】：

我想隐藏下拉箭头和按钮颜色，我使用的是vue-bootstrap。有没有其他方法可以用来在我的navbar 中进行下拉而不使用箭头和按钮颜色？我已经尝试了很多方法，但似乎我所做的每种样式都不适用于vue-bootstrap

<b-dropdown
id="dropdown-left"
text="RECIPE"
ref="dropdown"
class="m-md-2">
   <b-dropdown-item>A</b-dropdown-item>
   <b-dropdown-item>B</b-dropdown-item>
</b-dropdown>

还有包源：dropdown-bootstrap

【问题讨论】：

你能用你目前使用的东西制作jsfiddle或codesandbox吗？

标签： css vue.js bootstrap-vue

【解决方案1】：

只需使用 no-caret 道具隐藏箭头/插入符号：

 <b-dropdown no-caret>
   <!-- your content here -->
 </b-dropdown>

使用toggle-class 设置下拉按钮切换样式：

 <b-dropdown variant="link" toggle-class="my-custom-toggle" no-caret>
   <!-- your content here -->
 </b-dropdown>

.my-custom-toggle {
  color: black;
  text-decoration: none;
}

toggle-class 属性可以是Array、Object 或String。类似于 :class 在 vue.js 中绑定

在此处查看所有<b-dropdown /> 属性 --> https://bootstrap-vue.org/docs/components/dropdown#comp-ref-b-dropdown-props

【讨论】：

【解决方案2】：

您必须覆盖负责您在下拉组件中看到的默认类的样式，我不知道您是要在应用程序中永久更改下拉列表还是仅在一种情况下，所以您要么给您的下拉类名并使用此样式或简单地覆盖样式表中的默认类，如下所示：

.btn-secondary { /* this is the button's class */
    color: #000;
    background-color: transparent;
    border-color: transparent;
}
.dropdown-toggle::after{ /*this is responsible for the arrow you see in the button*/
    display:none;
    }
    

.btn-secondary.focus, .btn-secondary:focus, .btn-secondary:hover { /* this will change the button's hover & focus effect*/
    color: #000;
    background-color: #e7e7e7; /*just assumed you want it to be colored on hover IDK */
}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle { /*and apparently this is responsible for when the button is active*/
     color: #000; 
    background-color: #e7e7e7; 
}

【讨论】：