使用element-plus使用dialog，正常都没问题，今天新写了一个dialog作为子组件封装起来了，结果它的内容覆盖了页面所有别的dialog？

Question

v-model都是不同的
增加append-to-body="true" 无效

查看渲染结果
el-dialog__body里面全变成了我新写的那个dialog里的内容

新写的dialog，在子组件里

  <el-dialog 
  v-model="showChildView" 
  :before-close="closeHandle"
  width="calc(100vw-200px)"
  class="show_file_dialog"
  :title="props.name"
  :space="space"
  align-center
  destroy-on-close
  :append-to-body="false"
  >

新子组件里有watch，是这个更新影响了吗，可是文件才会触发呀

watch(() => (props.id,props.triggerRefresh), (newVal, oldVal) => {
  loadEnd.value = true
  if(!props.id) return;
  const fetchData = async () => {}
......

受干扰的dialog

    <el-dialog class="upbook_dialog" v-model="dialogFormVisible" title="上传书籍" style="width: 800px;">
      <div class="form_wrap">
        <el-form ref="uploadBookFormRef"
                 :model="uploadBookForm"
                 :rules="uploadBookFormRules" 
                 :inline="true"
                 >

不仅别的组件被干扰，父组件的dialog也被干扰了

Answer 1

...
我把子组件名字命名成ElDialog了...尴尬
难怪全部的dialog都被覆盖了，
并且改成el-drawer也没用

灵光一闪，好低级的错误

Answer 2

组件中style中有没有添加 scoped 属性

Answer 3

可能用了什么稀奇古怪的插件，比如自动引入之类的