Vue组件弹出层实现方法

vue弹出层做法有很多人有些疑问 组件的标签是需要写到模版上才能显示出来，为了设计出友好的组件弹出层接口，请看以下代码来自日常开发当中：

use([], function() {
    Vue.component('viewDialogComponent', {
        pageName: "tpl",
        props:["isShowDialog"],
        template: "public/pages/components/tpl/viewDialog/viewDialog.html",
        data:function() {
            return {
                isShow: true
            }
        },
        created: function() {},
        mounted: function() {
            this.isShow = true;
        },
        methods: {
            closeViewer: function() {
                this.isShow = false;
            }
        }
    });
});

var Dialog = {
    viewDialg: null,
    init: function(config) {
        var userName = config.userName;
        this.viewDialog = Vue.extend({
            template: "<viewDialogComponent :isShowDialog='true' :username=" + username + "></viewDialogComponent>"
        });
        return this;
    },
    show: function() {
        $("#viewer").html("");
        var component = new this.viewDialog().$mount();//挂载到内存节点上
        var viewerEle = $("<div id='viewer'></div>");
        $("#content-box").append(viewerEle);
        viewerEle.append($(component.$el));
    }
}

第一步定义一个vue dialog组件， 这个组件在组件标签挂载到页面上后才能被实例化，我们定义一个Dialog对象，挂载两个方法分别是 init，show， init负责初始化dialog组件需要传递的参数， show方法负责将dialog弹出框挂载到动态创建的挂载点上。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_10882