Vue.js如何修改b-form-file按钮文字并插入图标

BootstrapVue的<b-form-file>组件提供了官方属性和插槽来实现你的需求，无需自定义CSS：

• 修改按钮文字：使用官方的browse-text属性替换默认的"Browse"文本
• 添加图标：利用组件的browse-button插槽自定义按钮内容，插入图标元素

完整代码示例 #

<b-form-group>
  <b-form-file
    placeholder="Choose a file or drop it here..."
    drop-placeholder="Drop file here..."
    browse-text="Upload"
  >
    <!-- 用browse-button插槽自定义按钮内容 -->
    <template #browse-button>
      <!-- 示例使用BootstrapVue的b-icon组件，可替换为项目所用的图标库标签 -->
      <b-icon icon="upload" class="me-2"></b-icon>
      Upload
    </template>
  </b-form-file>
</b-form-group>

说明 #

1. browse-text是<b-form-file>专门用于设置浏览按钮文本的官方属性，你之前尝试的label/name属性并不适用于该组件的按钮文本配置
2. browse-button插槽允许完全自定义按钮内部结构，可自由组合图标与文本，适配不同图标库的使用场景

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