弹框套弹框里面的弹框有遮罩层的解决办法

努力做一个好前端

于 2023-03-28 17:51:59 发布

阅读量396

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45865992/article/details/129821400

版权

该文章展示了如何在Vue.js应用中利用el-dialog组件创建一个对话框，用于图片上传。对话框包含一个el-upload组件，限制上传1张图片，支持预览、移除和上传成功后的处理函数。用户可以查看已上传图片，并通过对话框底部的按钮进行取消或确认操作。

摘要由CSDN通过智能技术生成

append-to-body 在里面的dialog加这个

 <el-dialog title="上传" :visible.sync="dialog" width="30%" :before-close="handleClose">
        <el-upload class="avatar-uploader" :action="uploadActionUrl" :limit="1" list-type="picture-card"
          :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess">
          <i slot="default" class="el-icon-plus"></i>
        </el-upload>
        <el-dialog append-to-body :visible.sync="dialogVisible">
          <img width="100%" :src="ruleForm.dialogImageUrl" alt="">
        </el-dialog>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </el-dialog>