matedesktop/js/MateWindow.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 MateWindow{
    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}

    /* 顶部header：标题，图标，控件
            标题：颜色，字体，字号
            图标
            控件：背景色
       整体：位置，大小，全屏，显示
       事件
    */
    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 = MateWindow.CENTER;//
    windowLeft = MateWindow.CENTER;//
    windowBottom = MateWindow.NONE;//
    windowRight = MateWindow.NONE;//
    windowWidth = "auto";//
    windowHeight = "auto";//

    windowMaxWidth = MateWindow.NONE;//
    windowMaxHeight = MateWindow.NONE;//

    windowMinWidth = MateWindow.NONE;//
    windowMinHeight = MateWindow.NONE;//

    desktop = true;

    showWindow = true;//
    fullScreen = false;//

    resetSize = true;//

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

    maxCountWindow = 1;
    desktopIndex = -1;
    storageIndex = -1;

    menu = {};

    value = {};

    constructor(component){
        this.component = component;
        if(component.windowConfig)
            for (const key in component.windowConfig) {
                if (Object.hasOwnProperty.call(component.windowConfig, key)) {
                    this[key] = component.windowConfig[key];
                }
            }
        this.value = reactive(this.value);
    }

    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);
            });
        }
    }

    setState(state){
        this.state = state;
    }
}