element-ui的el-dialog使用v-if的引发的v-else问题，是由于append-to-body引发的bug

前言先看代码：<template><div><el-dialog v-if="dialogVisible" append-to-body v-bind="$attrs" v-on="$listeners"></el-dialog><div v-else>没有dialog就出示</div><el-button @click

致家驹

3687人浏览 · 2021-03-31 17:54:17

致家驹 · 2021-03-31 17:54:17 发布

前言

先看代码：

<template>
  <div>
    <el-dialog v-if="dialogVisible" append-to-body v-bind="$attrs" v-on="$listeners"></el-dialog>
    <div v-else>没有dialog就出示</div>
    <el-button @click="dialogVisible = !dialogVisible">改变dialogVisible</el-button>
  </div>
</template

结果为：

1、dialogVisible 默认为 false 时，div 出现了

2、dialogVisible 默认为 true 时，dialog 出现了，但切换成 false 的时候，div 没有出现，整个元素丢失了-_-|||

那我们尝试另一种写法：

<template>
  <div>
    <el-dialog v-if="dialogVisible" append-to-body v-bind="$attrs" v-on="$listeners"></el-dialog>
    <div v-if="dialogVisible">没有dialog就出示</div>
    <el-button @click="dialogVisible = !dialogVisible">改变dialogVisible</el-button>
  </div>
</template

结果为：

1、dialogVisible 默认为 false 时，div 出现了

2、dialogVisible 默认为 true 时，dialog 出现了，但切换成 false 的时候，div 不仅没有出现，更报错：「Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.」，我的天-_-|||

解决方案

1、将 div 的 v-if/v-else 改成 v-show

<template>
  <div>
    <el-dialog v-if="dialogVisible" append-to-body v-bind="$attrs" v-on="$listeners"></el-dialog>
    <div v-show="!dialogVisible">没有dialog就出示</div>
    <el-button @click="dialogVisible = !dialogVisible">改变dialogVisible</el-button>
  </div>
</template

2、经过不断试错后，发现是 append-to-body 引发的问题，可以将 append-to-body 设为 false，不仅如此，也要将 modal-append-to-body 设为 false，不然黑色半透明遮罩会遮住 dialog 的

<template>
  <div>
    <el-dialog v-if="dialogVisible" :append-to-body="false" :modal-append-to-body="false" v-bind="$attrs" v-on="$listeners"></el-dialog>
    <div v-else>没有dialog就出示</div>
    <el-button @click="dialogVisible = !dialogVisible">改变dialogVisible</el-button>
  </div>
</template