Bootstrap-Vue的b-modal初始状态未从body移除问题咨询

</b-modal>

![开发者工具截图](https://i.sstatic.net/8tQfQ.png)

现象：未主动打开的模态框已被附加到body中，需要在初始状态下移除这些未激活的模态框DOM。

---

### 解决方案

#### 1. 启用懒加载（推荐）
给`b-modal`添加`lazy`属性，模态框的DOM元素只会在**第一次触发显示**时才会被创建并挂载到body，初始状态不会出现在DOM中：
```vue
<b-modal lazy ... >
  <!-- 模态框内容 -->
</b-modal>

2. 条件渲染控制

通过变量配合v-if控制模态框的渲染时机，只有当需要打开时才渲染组件，彻底避免初始挂载：

<template>
  <Form ... >
    <b-modal v-if="isModalVisible" ref="myModal" ... >
      ...
    </b-modal>
  </Form>
</template>
<script lang="ts">
import { ErrorMessage, Field, Form } from 'vee-validate';
import { Options, Vue } from 'vue-class-component';

@Options({})
export class MyModal extends Vue {
  isModalVisible = false;

  openModal() {
    this.isModalVisible = true;
    // 如果需要直接调用模态框的显示方法，可结合ref
    // (this.$refs.myModal as any).show();
  }
}
</script>

3. 关闭自动挂载到body（谨慎使用）

如果不需要将模态框teleport到body，可设置teleport属性为false，但这可能影响模态框的层级、遮罩层的覆盖范围，需根据场景测试：

<b-modal teleport="false" ... >
  ...
</b-modal>

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