dialog模拟confirm

利用dialog模拟confirm

子组件:

        <template>

            <div>

                <el-dialog

                        :title="title"

                        :visible.sync="visible"

                        @close="$emit('update:isConfirm', false)"  //通过update:变量来更新变量值

                        :isConfirm="isConfirm" 

                        width="30%">

                        <div v-text="confirmDec"></div>

                        <span slot="footer" class="dialog-footer">

                                    <el-button @click="visible = false">返回</el-button>

                                    <el-button type="primary" @click="handleClick" v-text="btnText"></el-button>

                        </span>

                    </el-dialog>

                </div>

            </template>

            data() {

                return {

                        title : '',

                        confirmDec : '',

                        visible: this.isConfirm,   //通过值来控制组件显示隐藏

                        isConfirmEnter : false,

                        btnText : ''

                        }

                },

            props: {

                isConfirm: {

                        type: Boolean,

                        default: false

                }

            },

            watch: {

                isConfirm () {

                        this.visible = this.isConfirm;    //监听控制

                }

            },

            methods : {

                    handleClick (evevt){

                            this.$emit('msgfromchild',event.target);  //通过emit传递事件给父组件

                }

            }


父组件:

    <confirm :is-confirm.sync="isReaderConfirm" ref="confirmReaderComponent" @msgfromchild="readerConfirm">

        </confirm>  //通过sync修饰符 它会被扩展为一个自动更新父组件属性的 v-on 侦听器

    this.isReaderConfirm = true; //子组件显示

    this.$refs.confirmReaderComponent.xx = 'xxxxx'; //父组件通过$refs赋值

    readerConfirm (){

        //这个里面就可以写触发事件之后的操作

    }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容