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

2023-12-22 08:34:41

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

这样就可以啦 如图：

文章来源:https://blog.csdn.net/paradoxaaa_/article/details/135135469
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。