matedesktop/js/WindowConfig.js

云桌面前端框架vue插件-测试版本

import {  reactive } from "vue";

const CENTER = Symbol("CENTER");
const LEFT = Symbol("LEFT");
const RIGHT = Symbol("RIGHT");
const TOP = Symbol("TOP");
const BOTTOM = Symbol("BOTTOM");
const NONE = Symbol("NONE");

export default class WindowConfig{
    static get CENTER(){return CENTER}
    static get LEFT(){return LEFT}
    static get RIGHT(){return RIGHT}
    static get TOP(){return TOP}
    static get BOTTOM(){return BOTTOM}
    static get NONE(){return NONE}

    component = null;
    component = null;
    componentName = null;
    eventList = {};

    value = {};

    props = reactive({
        // 窗口状态，0未启用，1已启用，2已销毁
        state : 0,
        // 窗口图标
        icon : "https://img1.baidu.com/it/u:960918820,2089023229&fm:253&app:138&size:w931&n:0&f:JPEG&fmt:auto?sec:1664298000&t:744ba5bf4295ba6c8fe8d403409ea435",
        // 窗口名称
        title : null, 
        // 是否显示标题栏
        showTitleBar : true,
        // 标题栏
        titleBarBackground : "rgb(61, 61, 61)",
        // 标题颜色
        titleBarFontColor : "white",
        // 标题字体大小
        titleBarFontSize : "15px",
        // 标题字粗
        titleBarFontWeight : 600,
        // 标题字体
        titleBarFontFamily : "微软雅黑",
        // 关闭窗口图标背景色
        titleBarCancelBackground : "#00a2ff",
        // 全屏窗口图标背景色
        titleBarFullScreenBackground : "#00ff00",
        // 隐藏窗口图标背景色
        titleBarHideBackground : "red",

        windowTop : WindowConfig.CENTER,
        
        windowLeft : WindowConfig.CENTER,
        windowBottom : WindowConfig.NONE,
        windowRight : WindowConfig.NONE,
        windowWidth : "auto",
        windowHeight : "auto",

        windowMaxWidth : WindowConfig.NONE,
        windowMaxHeight : WindowConfig.NONE,

        windowMinWidth : WindowConfig.NONE,
        windowMinHeight : WindowConfig.NONE,

        desktop : true,

        showWindow : true,
        fullScreen : false,

        resetSize : true,

        maxCountWindow : 1,
        desktopIndex : -1,
        storageIndex : -1,
    });

    constructor(component){
        this.component = component;

        let config = component.windowConfig ;
        if(typeof config == "function") config = config();

        if(config && config.props){
            for (const key in config.props) {
                if (Object.hasOwnProperty.call(config.props, key) && typeof config.props != "undefined") {
                    this.props[key] = config.props[key];
                }
            }
        }
    }

    addEvent(name,callBack){
        if(typeof this.eventList[name] == "function"){
            this.eventList[name] = [this.eventList[name]];
            this.eventList[name].push(callBack);
        }
        else if(typeof this.eventList[name] == "undefined") {
            this.eventList[name] = callBack;
        }
    }

    removeEvent(name,callBack=null){
        if(callBack == null){
            delete this.eventList[name];
        }
        else if(typeof this.eventList[name] == "function") {
            if(callBack == this.eventList[name]){
                delete this.eventList[name];
            }
        }
        else if(this.eventList[name] instanceof Array){
            for (let index = 0; index < this.eventList[name].length; index++) {
                const element = this.eventList[name][index];
                if(element == callBack){
                    this.eventList[name].splice(index,1);
                    break;
                }
            }
        }
    }

    emit(name,data){
        if(typeof this.eventList[name] == "function") {
            return this.eventList[name](data);
        }
        else if(this.eventList[name] instanceof Array){
            this.eventList[name].forEach(element => {
                element(data);
            });
        }
    }

    setProp(name,value){
        this.props[name] = value;
    }
}