白天黑夜切换开关 - vue2实现

<template> <div class="switch1" :style="cssVars"> <!-- 开关 --> <div class="main" ref="main"> <!-- 开关键 --> <div class="switch_key" ref="switch_key" @click="triggerWB"> <div class="key_center"> <div class="key_min km1" ref="km1"></div> <div class="key_min km2" ref="km2"></div> <div class="key_min km3" ref="km3"></div> </div> </div> <!-- 天空背景 --> <div class="bg1 bg" ref="bg1"></div> <div class="bg2 bg" ref="bg2"></div> <div class="bg3 bg" ref="bg3"></div> <!-- 云 --> <!-- 前云 --> <div class="cloud_front cdft1" ref="cdft1"></div> <div class="cloud_front cdft2" ref="cdft2"></div> <div class="cloud_front cdft3" ref="cdft3"></div> <div class="cloud_front cdft4" ref="cdft4"></div> <div class="cloud_front cdft5" ref="cdft5"></div> <div class="cloud_front cdft6" ref="cdft6"></div> <!-- 后云 --> <div class="cloud_later cdlr1" ref="cdlr1"></div> <div class="cloud_later cdlr2" ref="cdlr2"></div> <div class="cloud_later cdlr3" ref="cdlr3"></div> <div class="cloud_later cdlr4" ref="cdlr4"></div> <div class="cloud_later cdlr5" ref="cdlr5"></div> <div class="cloud_later cdlr6" ref="cdlr6"></div> <!-- 星星 --> <div class="star star1" ref="star1"> <div class="star_min sm1" ref="sm1"></div> <div class="star_min sm2" ref="sm2"></div> <div class="star_min sm3" ref="sm3"></div> <div class="star_min sm4" ref="sm4"></div> </div> <div class="star star2" ref="star2"> <div class="star_min sm1" ref="sm5"></div> <div class="star_min sm2" ref="sm6"></div> <div class="star_min sm3" ref="sm7"></div> <div class="star_min sm4" ref="sm8"></div> </div> <div class="star star3" ref="star3"> <div class="star_min sm1" ref="sm9"></div> <div class="star_min sm2" ref="sm10"></div> <div class="star_min sm3" ref="sm11"></div> <div class="star_min sm4" ref="sm12"></div> </div> <div class="star star4" ref="star4"> <div class="star_min sm1" ref="sm13"></div> <div class="star_min sm2" ref="sm14"></div> <div class="star_min sm3" ref="sm15"></div> <div class="star_min sm4" ref="sm16"></div> </div> </div> </div> </template> <script> export default { data(){ return{ sizeLocal : 70, } }, props:{ // boolean -- 必传(switchBoolean.sync -- 父传子自定义属性名) -- 默认值：true switchBoolean : { type : Boolean, required : true, default : true }, // big/middle/small -- 非必传(size -- 父传子自定义属性名) -- 默认值：'middle' size : { type : String, default:"middle" } }, computed:{ // 实现css使用js变量 -- 需要先在根标签上挂style,通常使用计算属性反映 data 中的 变量到 css 中 cssVars(){ return { '--width': `${this.sizeLocal}px`, '--height': `${this.sizeLocal*0.4}px`, '--height50': `${this.sizeLocal*0.2}px`, '--padding': `${this.sizeLocal/30}px`, '--keyWidth': `${this.sizeLocal/3}px`, '--width60': `${this.sizeLocal*0.6}px`, '--width30': `${this.sizeLocal*0.3}px`, '--width24': `${this.sizeLocal*0.24}px`, '--width15': `${this.sizeLocal*0.15}px`, '--width10': `${this.sizeLocal*0.10}px`, '--width2': `${this.sizeLocal*0.02}px`, '--width1': `${this.sizeLocal*0.01}px`, '--width05': `${this.sizeLocal*0.005}px` } } }, created(){ if(this.size === "big"){ this.sizeLocal = 100 }else if(this.size === "small"){ this.sizeLocal = 40 }else{ this.sizeLocal = 70 }; }, mounted(){ this.toggleStyle(!this.switchBoolean) }, methods:{ forToggleItem(num , item , one , two){ for(let i=1 ; i<num+1 ; i++){ this.toggleItem( `${item}${i}` , one , two ) } }, toggleItem( item , one , two ){ this.$refs[item].classList.toggle(one) this.$refs[item].classList.remove(two) }, toggleStyle(boolean){ if(boolean){ // 太阳到月亮 this.toggleItem( 'switch_key' , 'morToNight' , 'nightToMor' ) // 白到黑 this.toggleItem( 'main' , 'whiteToBlack' , 'blackToWhite' ) // 切换前云颜色 this.forToggleItem(6 , 'cdft' , 'cloudFrontChange1' , 'cloudFrontChange2') // 切换后云颜色 this.forToggleItem(6 , 'cdlr' , 'whiteToBlack2' , 'blackToWhite2') // 光线移动 this.forToggleItem(3 , 'bg' , 'toXWitch1' , 'toXWitch2') // 星星升起 this.forToggleItem(4 , 'star' , 'toYHei1' , 'toYHei2') // 控制星星背景颜色 this.forToggleItem(16 , 'sm' , 'whiteToBlack' , 'blackToWhite') // 控制月球坑显现 this.forToggleItem(3 , 'km' , 'kmOpacity1' , 'kmOpacity2') }else{ // 月到日 this.toggleItem( 'switch_key' , 'nightToMor' , 'morToNight' ) // 黑到白 this.toggleItem( 'main' , 'blackToWhite' , 'whiteToBlack' ) // 切换前云颜色 this.forToggleItem(6 , 'cdft' , 'cloudFrontChange2' , 'cloudFrontChange1') // 切换后云颜色 this.forToggleItem(6 , 'cdlr' , 'blackToWhite2' , 'whiteToBlack2') // 光线移动 this.forToggleItem(3 , 'bg' , 'toXWitch2' , 'toXWitch1') // 星星降下 this.forToggleItem(4 , 'star' , 'toYHei2' , 'toYHei1') // 控制星星背景颜色 this.forToggleItem(16 , 'sm' , 'blackToWhite' , 'whiteToBlack') // 控制月球坑显现 kmOpacity1 this.forToggleItem(3 , 'km' , 'kmOpacity2' , 'kmOpacity1') } }, triggerWB(){ this.toggleStyle(this.switchBoolean) this.$emit('update:switchBoolean' , !this.switchBoolean) } } } </script> <style lang="scss" scoped> // js中使用 ==> 节点.style.setProperty("--font-color", 'pink'); // sass中使用 ==> var(--font-color) ==> pink $width : var(--width); $height : var(--height); $height50 : var(--height50); $padding : var(--padding); $keyWidth : var(--keyWidth); $width60 : var(--width60); $width30 : var(--width30); $width24 : var(--width24); $width15 : var(--width15); $width10 : var(--width10); $width2 :