Bootstrap-vue中如何修改b-dropdown组件的按钮尺寸为btn-sm

你现在的写法存在两个核心错误：

1. 组件标签误用：<b-dropdown-item-btn>是下拉菜单内部的按钮组件，不是外层的下拉容器组件，你需要调用的外层下拉容器应该是<b-dropdown>
2. 尺寸属性配置无效：BootstrapVue的下拉组件没有button这个自定义属性，控制触发按钮尺寸的专用属性是size，按钮样式主题用variant属性配置即可

• 将外层标签替换为<b-dropdown>
• 新增size="sm"属性即可实现btn-sm的小尺寸效果
• 按钮主题用variant="primary"配置，不需要手动编写btn相关类名
• 下拉菜单内部的内容需要包裹在<b-dropdown-menu>标签内才能正常渲染

修正后的代码示例：

<b-dropdown size="sm" variant="primary" right id="dropdown-1" class="m-md-2" style="display: inline;">
  <template #button-content>
    <i class="fa fa-gear"></i>
  </template>
  <b-dropdown-menu>
    <b-form-select v-model="accounting_period_1" :options="accounting_period_options" @change="filterRevenueAndCosts()">
    </b-form-select>
  </b-dropdown-menu>
</b-dropdown>

如果你需要调整的是下拉内部的按钮尺寸，才需要给<b-dropdown-item-btn>加size="sm"属性，注意不要混淆外层容器和内部项的属性配置。

内容的提问来源于stack exchange，提问作者Angel