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

最新推荐文章于 2024-07-12 11:17:47 发布

原创最新推荐文章于 2024-07-12 11:17:47 发布 · 2.8k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #elementui #javascript

笔记专栏收录该内容

54 篇文章

订阅专栏

文章讲述了在使用VueElementUI对话框时，如何从`v-model`更改为`.sync`绑定可见性，以及添加`append-to-body`属性来解决弹窗遮罩层下无法点击关闭的问题。

初始写法使用了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>

这样就可以啦如图：