b-form-tags组件移除按钮渲染异常问题咨询

b-form-tags移除按钮无法渲染排查方案 #

• 版本兼容性校验
  b-form-tags为BootstrapVue v2.1.0及以上版本才支持的组件，若当前依赖版本低于要求会出现功能缺失。可执行命令npm list bootstrap-vue查看本地版本，版本过低时执行npm install bootstrap-vue@latest升级到稳定版即可修复。
• 图标依赖缺失排查
  组件内置的移除按钮默认依赖Bootstrap Icons图标库，若项目未全局引入该图标库，叉号图标会无法渲染。可选择两种方案修复：
  1. 全局引入Bootstrap Icons依赖，在入口文件中添加注册逻辑：

  // Vue2 项目
  import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
  Vue.use(BootstrapVue)
  Vue.use(IconsPlugin)
  
  // Vue3 项目
  import { BootstrapVue3 } from 'bootstrap-vue-3'
  import { BootstrapIconsPlugin } from 'bootstrap-icons-vue'
  app.use(BootstrapVue3)
  app.use(BootstrapIconsPlugin)
  

  2. 使用自定义插槽重写移除按钮，避开图标依赖，示例代码如下：

  <template>
  ...
  <b-form-group label="Keywords" label-for="input-3">
       <b-form-tags
       id="input-3"
       v-model="form.keywords"
       placeholder="Add keyword here"
       remove-variant="outline-secondary"
       >
         <template #remove="{ remove }">
           <span @click="remove" class="ml-1">×</span>
         </template>
       </b-form-tags>
  </b-form-group>
  ...
  </template>
  

• 样式冲突排查
  打开浏览器开发者工具的元素面板，定位到标签的移除按钮节点，检查是否存在全局自定义样式覆盖了.b-form-tag-remove类的显示规则，比如被设置了display: none、opacity: 0等属性，调整冲突样式即可。
• 强制指定移除按钮属性
  可显式添加remove-variant属性指定按钮主题，避免默认样式未加载，示例：<b-form-tags ... remove-variant="danger"></b-form-tags>

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