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

作者站长头像
站长
· 阅读数 18

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也被干扰了

回复
1个回答
avatar
test
2024-06-28

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

灵光一闪,好低级的错误

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容