解决vue2项目 el-dialog弹窗不显示

初始写法 使用了v-model 弹窗不显示

<el-dialog v-model="dialogVisible" title="Popup Content" :width="dialogWidth" @close="handleCloseDialog">
          <p>{{ selectedItemContent }}</p>
        </el-dialog>

将v-model改为:visible.sync="dialogVisible" 就可以了

  <el-dialog :visible.sync="dialogVisible" title="Popup Content" size="large" @close="handleCloseDialog">
          <p>{{ selectedItemContent }}</p>

          <template v-slot:footer>
            <div style="text-align: right">
              <el-button @click="handleCloseDialog">关闭</el-button>
              <el-button @click="handleSubmit" type="primary">确认</el-button>

            </div>
          </template>
        </el-dialog>

但是此时的弹窗在遮罩层底下 无法点击关闭

我们还需要增加一个配置：:append-to-body="true"

 <el-dialog :visible.sync="dialogVisible" title="Popup Content" size="large" @close="handleCloseDialog" :append-to-body="true">
          <p>{{ selectedItemContent }}</p>

          <template v-slot:footer>
            <div style="text-align: right">
              <el-button @click="handleCloseDialog">关闭</el-button>
              <el-button @click="handleSubmit" type="primary">确认</el-button>

            </div>
          </template>
        </el-dialog>

这样就可以啦 如图：