Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

[Vue] solve the problem of click display and hiding encapsulated by El dialog as a sub component

Pulseum 2022-05-14 15:58:46 阅读数:1 评论数:0 点赞数:0 收藏数:0

element-ui Medium el-dialog Components are often used as nested forms , However, when we encapsulate it into a sub component, we will find that clicking hide and display will have problems . Here is the key code , Hopefully that helped , Learning together .

Solve the code :

el-dialog Child components :

<template>
<div class="dialog">
<el-dialog title=" Publish articles " :visible.sync="dialogFormVisible" @close="closeDialog" >
<!-- Forms -->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm" >
<el-form-item label=" Article cover :" prop="file">
<!-- Article cover image upload starts -->
<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>
<!-- The upload of the article cover image is over -->
</el-form-item>
<!-- Abstract -->
<el-form-item label=" Article summary :" prop="description" style="margin-top: 5px" >
<el-input type="textarea" v-model="ruleForm.description"></el-input>
</el-form-item>
<el-form-item label=" Release form :" prop="status" style="margin-top: 10px;">
<el-radio-group v-model="ruleForm.status">
<el-radio :label="1"> Open </el-radio>
<el-radio :label="3"> Private </el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog"> take eliminate </el-button>
<el-button type="primary" @click="submitForm('ruleForm')" > indeed set </el-button >
</div>
</el-dialog>
</div>
</template>

001
002
003
003

el-dialog Parent component :

001
002
003
004
According to the above code, we can realize el-dialog As a sub component, it normally shows and hides .

Copyright statement
In this paper,the author:[Pulseum],Reprint please bring the original link, thank you