关于el-dialog，我更推荐的用法

//dialog.js
function makeDialog(option) {
    var dom = document.createElement('div');
    document.getElementsByTagName('body')[0].appendChild(dom);
    let tpl = '\
        <el-dialog \
            :close-on-click-modal="false" \
            :custom-class="customClass" \
            :title="title" \
            :visible.sync="show" \
            :size="size" \
            :before-close="handleClose" \
            @close="close">\
                <dialogContent  @close="closeDialog" @confirm="confirmDialog" v-model="dialogData"></dialogContent>\
        </el-dialog>';
    var vue = new Vue({
        el: dom,
        data: function () {
            return {
                title: option.title,
                size: option.size || 'small',
                show: true,
                dialogData: option.data,
            };
        },
        template: tpl,
        computed: {
            customClass(){
                return `el-dialog--width-${option.size || 'auto'}`;
            }
        },
        methods: {
            handleClose(done){
                if (option.beforeClose) {
                    option.beforeClose(done);
                } else {
                    done();
                }
            },
            close() {
                if (option.close) {
                    option.close();
                }
            },

            closeDialog(){
                this.show = false
            },
            confirmDialog(result){
                this.show = false
                option.confirm && option.confirm(result)
            }
        },
        components: {
            dialogContent: option.component,
        },
    });
    return vue;
}

export default {
    open(options){
        return makeDialog(options)
    }
}

<!--SimpleDialogTest.vue-->
<template>
    <div class="tutorial">
        请输入您的姓名 <input class="form-control" v-model="name">

        <button type="button" class="btn btn-primary" @click="submit">确定</button>
        <button type="button" class="btn btn-default" @click="cancel">取消</button>
    </div>
</template>
<style lang="scss" rel="stylesheet/scss" scoped>

</style>
<script type="text/ecmascript-6">
    import dialog from '../../assets/js/dialog'
    export default{
        props: {
            value: Object,
        },
        data(){
            return {
                name : this.value.name
            }
        },

        methods: {
            submit(){
                console.log('your name is ' + this.name)
                //do something if you like
                //...

                //关闭对话框
                this.$emit('close');

                //关闭对话框, 并回调调用者的option.confirm方法
//                this.$emit('confirm', {
//                        ...
//                });
            },
            cancel(){
                this.$emit('close')
            }
        },

    }
</script>

<!---调用方-->
<template>
    <button @click="openDialog">弹出对话框</button>
</template>
<script type="text/ecmascript-6">
    import dialog from '../assets/js/dialog'
    import SimpleDialogTest from 'SimpleDialogTest.vue'
    export default{
        data(){
            return{
            }
        },
        methods:{
            openDialog(){
                dialog.open({
                    title: '标题标题',
                    size:'small', //可选项tiny/small/large/full, 对应el-dialog的size属性
                    component: SimpleDialogTest,
                    data: {
                        name: 'your name',
                    },
//                    beforeClose: (done) => {
//                        //点右上角关闭按钮后触发
//                        console.log('dialog is closing');
//                        done()
//                    },
                    close: () => {
                        //关闭后触发
                        console.log('dialog is closed')
                    },
                    confirm: (result) => {
                        //显式$emit('confirm')时触发
                        console.log('dialog is confirmed, and dialog result is ', result)
                    }
                })
            }
        }
    }
</script>

.el-dialog.el-dialog--width-auto{
  width:auto !important;
}