创建自定义面板

// 创建自定义的面板
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
        }

    }
}