如何实现无文本仅展示下拉箭头的b-dropdown组件且选项在正下方展开

你之前给text属性塞空格不生效，是因为b-dropdown的text属性默认会自动修剪空白字符，填充的空格会被过滤，无法正常占位。

可通过插槽、对齐属性配合自定义样式实现需求，完整实现代码如下：

<template>
  <div>
    <b-dropdown 
      id="dropdown-right" 
      class="m-2 blank-dropdown"
      menu-align="end"
      <!-- 老版本BootstrapVue如果menu-align不生效，替换为right属性即可：right -->
    >
      <!-- 使用button-content插槽填充空格，不会被自动修剪 -->
      <template #button-content>
        &nbsp;&nbsp;
      </template>
      <b-dropdown-item>Phone Number</b-dropdown-item>
      <b-dropdown-item>Email</b-dropdown-item>
      <b-dropdown-item>DeviceToken</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<style scoped>
/* 调整最小宽度控制箭头前空白区域的大小，可按需修改 */
.blank-dropdown .dropdown-toggle.btn {
  min-width: 50px;
  text-align: right;
}
</style>

配置说明：

• #button-content插槽的内容不会被自动修剪，填入的空格可以正常生效，占位空白区域
• menu-align="end"（或right）属性让下拉菜单与按钮右端对齐，刚好匹配向下箭头的位置，实现下拉选项对齐在箭头正下方的效果
• 给toggle按钮设置最小宽度和右对齐，可固定预留的空白区域大小，按需调整min-width的数值即可

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