【Vue】解决el-dialog作为子组件封装点击显示与隐藏问题

最新推荐文章于 2025-06-04 17:23:12 发布

Pulseum

最新推荐文章于 2025-06-04 17:23:12 发布

阅读量6k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js elementui vue

本文链接：https://blog.csdn.net/qq_53472371/article/details/124717794

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何解决在Vue中使用Element UI的el-dialog组件作为子组件时，点击显示与隐藏的问题。通过展示el-dialog子组件和其所在父组件的关键代码，提供了解决方案，帮助开发者实现子组件的正确显示与隐藏功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-ui中的el-dialog组件经常用作嵌套表单来使用，但是当我们把它封装成一个子组件时会发现点击隐藏与显示会出现问题。以下贴出关键代码，希望对大家有帮助，共同学习。

解决代码：

el-dialog子组件：

<template>
  <div class="dialog">
    <el-dialog
      title="发布文章"
      :visible.sync="dialogFormVisible"
      @close="closeDialog"
    >
      <!-- 表单  -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="110px"
        class="demo-ruleForm"
      >
        <el-form-item label="文章封面：" prop="file">
          <!-- 文章封面图片上传开始 -->
          <el-upload
            ref="uploadxls"
            action="/blog-console/blog"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :headers="headersObj"
            :auto-upload="false"
            :before-upload="beforeupload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
          <!-- 文章封面图片上传结束 -->
        </el-form-item>

        <!-- 摘要 -->
        <el-form-item
          label="文章摘要："
          prop="description"
          style="margin-top: 5px"
        >
          <el-input type="textarea" v-model="ruleForm.description"></el-input>
        </el-form-item>

        <el-form-item label="发布形式：" prop="status" style="margin-top: 10px;">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">公开</el-radio>
            <el-radio :label="3">私密</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>