窗口增加滑块slider组件

src/renderer/components/Slider.vue

@@ -5,34 +5,25 @@
         <div v-for="item in sliderJson"
              :style="{
                     position:'absolute',
-                    left:item.Left*bigScale+'px',
-                    top:item.Top*bigScale+'px',
+                    left:(item.Left-window.Left)*bigScale+'px',
+                    top:(item.Top-window.Top)*bigScale+'px',
                     width:item.Width*bigScale + 'px',
                     height:item.Height*bigScale + 'px',
                     zIndex:item.ZIndex,
-                    display:item.IsVisibility ? 'block' : 'none',
                     backgroundRepeat:'no-repeat',
+                    backgroundSize:'100% 100%',
                 }"
              :ref="item.ID"
         >
             <div
-                    :style="{
-                           width:item.imgBgWidth*bigScale + 'px',
-                           height:item.imgBgHeight*bigScale + 'px',
-                        }"
+                :style="{
+                        width:item.imgSliderWidth*bigScale + 'px',
+                        height:item.imgSliderHeight*bigScale + 'px',
+                        backgroundImage:'url('+require(`../../../static/Data/${item.SliderIcon}`)+')',
+                        backgroundRepeat:'no-repeat',
+                    }"
             >
-                <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>
@@ -46,20 +37,22 @@
         data() {
             return {
                 sliderJson:[],
-                staticUrl:this.$store.state.staticUrl
+                staticUrl:this.$store.state.staticUrl,
+                window:this.$attrs.window
             }
         },
 
         async beforeCreate() {
-            this.sliderJson = await getStaticFile('EnitySlider.Data')
+            const arr = await getStaticFile('EnitySlider.Data')
+            this.sliderJson = arr.filter(item => item.WindowID === this.window.ID)
         },
 
-        mounted() {
+        updated() {
             // 设置背景图片
             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
+                this.$refs[item][0].style.backgroundImage = sliderArr[index] ? 'url('+`${this.staticUrl}/Data/${sliderArr[index].BackIcon}`+')' : null
             })
         },
 
@@ -68,7 +61,3 @@
         }
     }
 </script>
-
-<style scoped>
-
-</style>

src/renderer/components/Window.vue

@@ -19,6 +19,7 @@
             <Label :window="item"/>
             <Img :window="item"/>
             <BigShow :window="item"/>
+            <Slider :window="item"/>
         </div>
     </div>
 </template>
@@ -32,6 +33,7 @@
     import Label from './Label'
     import Img from './Image'
     import BigShow from './BigShow'
+    import Slider from "./Slider"
     import {OPEN_WINDOWS} from "../../utils/constant"
 
     export default {
@@ -39,7 +41,8 @@
             Button,
             Label,
             Img,
-            BigShow
+            BigShow,
+            Slider
         },
 
         data() {
@@ -68,6 +71,7 @@
                         if(item.ID === item2){
                             item.IsVisibility = true
                             showWindows.push(item)
+                            // 显示窗口背景
                             this.$refs[item.ID][0].style.backgroundImage = item.BackIcon ? 'url('+`${this.staticUrl}/Data/${item.BackIcon}`+')' : null
                         }
                     })