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

Question

我想隐藏下拉箭头和按钮颜色，我正在使用 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

Answer 1

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

.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; 
}

Answer 2

只需使用 no-caret 道具隐藏 arrow/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

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

How do I hide button and drop down arrow from Vue bootstrap dropdown?

css

vue.js

bootstrap-vue