videoApp/src/renderer/components/Slider.vue

<!--Slider滑块组件-->

<template>
    <div>
        <div v-for="item in sliderJson"
             :style="{
                    position:'absolute',
                    left:item.Left*bigScale+'px',
                    top:item.Top*bigScale+'px',
                    width:item.Width*bigScale + 'px',
                    height:item.Height*bigScale + 'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'block' : 'none',
                    backgroundRepeat:'no-repeat',
                }"
             :ref="item.ID"
        >
            <div
                    :style="{
                           width:item.imgBgWidth*bigScale + 'px',
                           height:item.imgBgHeight*bigScale + 'px',
                        }"
            >
                <div
                        :style="{
                            width:item.imgSliderWidth*bigScale + 'px',
                            height:item.imgSliderHeight*bigScale + 'px',
                            backgroundImage:'url('+require(`../../../static/Data/${item.SliderIcon}`)+')',
                            backgroundRepeat:'no-repeat',
                            marginLeft:'40%',
                        }"
                        @click="clickBtn(item)"
                >

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {getStaticFile} from "../../utils/tools"

    export default {
        data() {
            return {
                sliderJson:[],
                staticUrl:this.$store.state.staticUrl
            }
        },

        async beforeCreate() {
            this.sliderJson = await getStaticFile('EnitySlider.Data')
        },

        mounted() {
            // 设置背景图片
            const sliderArr = this.sliderJson
            const keyArr = Object.keys(this.$refs)
            keyArr.forEach((item,index) => {
                this.$refs[item][0].style.backgroundImage = sliderArr[index].BackIcon ? 'url('+`${this.staticUrl}/Data/${sliderArr[index].BackIcon}`+')' : null
            })
        },

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

<style scoped>

</style>