创建自定义面板

// 创建自定义的面板
export default class viewerPanel {constructor() {this.setVisibleFunction()
        this.visibilityCallbacks = {};
        this.addVisibilityListenerFunction();}
    // 创建 viewer 面板
    creatViewerPanel(container,id,title){container.append(`<div class="panel-black viewer-panel" id="${id}" count="${this.count}">
            <div class="title panel-title">
                ${title}
                <span class="panel-close iconfont icon-close"></span>
            </div>
            <div class="panel-container">
                
                <div id="${id}-scroll-container" class="panel-container-scroll">
                   
                </div>
            </div>
        
        </div>`)
        $(".panel-close").on("click",function () {$(this).parent().parent().setVisible(false)

        })
        // 缩放
        $("#"+id).resizable();
        //  拖拽
        $("#"+id).draggable({containment: "body", scroll: false , handle: ".panel-title"});
        return $("#"+id);
    }
    // 设置 visible 函数
    setVisibleFunction(){
        var _this = this;
        $.fn.setVisible = function(flag){var count = $(this).attr("id")
            if(flag){$(this).show()}else{$(this).hide()}
            _this.visibilityCallbacks[count](flag);

        }
    }
    // 添加监听函数
    addVisibilityListenerFunction(){
        var _this = this
        $.fn.addVisibilityListener = function(callBack){var count = $(this).attr("id")
            _this.visibilityCallbacks[count] = callBack
        }

    }
}