videoApp/src/renderer/components/Window.vue

<!--除主页意外的其他窗口-->
<template>
    <div>
        <div v-for="item in windows"
             :style="{
                position: 'absolute',
                left:item ? item.Left*bigScale+'px' : '',
                top:item ? item.Top*bigScale+'px' : '',
                width:item ? item.Width*bigScale + 'px' : '',
                height:item ? item.Height*bigScale + 'px' : '',
                zIndex:item ? item.ZIndex : '',
                display:item ? (item.IsVisibility ? 'block' : 'none') : '',
                backgroundRepeat:'no-repeat',
                backgroundSize:'100% 100%',
             }"
                :ref="item.ID"
        >
            <Button :window="item"/>
            <Label :window="item"/>
            <Img :window="item"/>
            <BigShow :window="item"/>
        </div>
    </div>
</template>

<script>
    import {mapState} from "vuex"
    import {getNeedMoutedEleArr, getStaticFile} from "../../utils/tools"
    import Button from "./Button"
    import Label from './Label'
    import Img from './Image'
    import BigShow from './BigShow'

    export default {
        components: {
            Button,
            Label,
            Img,
            BigShow
        },

        data() {
            return {
                windows:[],
                eleObj:{},
                staticUrl:this.$store.state.staticUrl, // 静态资源路径
            }
        },

        async beforeCreate() {
            const eleObj = {}
            this.windows = await getStaticFile('EnityWindow.Data')
            for(const item of this.windows){
                eleObj[item.ID] = await getNeedMoutedEleArr(item.ID)
            }
            this.eleObj = eleObj
        },

        updated() {
            // 设置背景图片
            const keyArr = Object.keys(this.$refs)
            keyArr.forEach(item => {
                if(this.eleObj[item]){
                    const arr = this.eleObj[item].filter(item => item.BackIcon)
                    for(const a of arr){
                        this.$refs[a.ID][0].style.backgroundImage = a.BackIcon ? 'url('+`${this.staticUrl}/Data/${a.BackIcon}`+')' : null
                    }
                }
            })
        },

        computed: {
            ...mapState(['bigScale'])
        }
    }
</script>