Vue動態背景及其實現

一、Vue動態背景圖

Vue動態背景圖通過更改背景CSS屬性實現。我們可以通過設置計算屬性，動態設置背景圖的URL。這樣可以使得背景圖在不同的時間點發生變化。

    
        <template>
          <div :style="{backgroundImage: 'url('+imageURL+')'}">
            <h2>Vue動態背景圖</h2>
          </div>
        </template>
        
        <script>
          export default {
            data () {
              return {
                imageURL: ''
              }
            },
            computed: {
              getBackgroundImage() {
                const images = ['image1.jpg', 'image2.jpg', 'image3.jpg']
                const randomIndex = Math.floor(Math.random() * images.length)
                return images[randomIndex]
              }
            },
            created() {
              this.imageURL = this.getBackgroundImage
            }
          }
        </script>
    

二、Vue動態背景特效

Vue動態背景特效可以使用CSS實現。其中比較常見的是使用雪花特效，使用偽元素實現，在背景圖上固定不動的雪花，營造出雪天的效果。

    
        <template>
          <div class="background">
            <h2>Vue動態背景特效</h2>
          </div>
        </template>
        
        <style scoped>
          .background {
            background-image: url('./background-image.jpg');
            position: relative;
          }
          .background::before {
            content: ' ';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('./snowflake.png');
            pointer-events: none;
            animation: snow 10s linear infinite;
            z-index: -1;
          }
          @keyframes snow {
            0% {
              transform: translateY(-100%);
            }
            100% {
              transform: translateY(100%);
            }
          }
        </style>
    

三、Vue動態背景圖片

Vue動態背景圖片的實現和Vue動態背景圖類似，不同之處在於背景圖可以是多張圖片組成的輪播，隨着時間的推移而發生變換。

    
        <template>
          <div :style="{backgroundImage: 'url('+imageURL+')'}">
            <h2>Vue動態背景圖片</h2>
          </div>
        </template>
        
        <script>
          export default {
            data () {
              return {
                imageURL: ''
              }
            },
            computed: {
              getBackgroundImage() {
                const images = ['image1.jpg', 'image2.jpg', 'image3.jpg']
                const randomIndex = Math.floor(Math.random() * images.length)
                return images[randomIndex]
              }
            },
            mounted() {
              setInterval(() => {
                this.imageURL = this.getBackgroundImage()
              }, 5000)
            }
          }
        </script>
    

四、Vue動態背景視頻

Vue動態背景視頻可以通過 HTML5 video 標籤實現。我們可以動態設置 video 標籤的 src 屬性，從而實現動態背景視頻效果。

    
        <template>
          <div>
            <video :src="videoURL" autoplay loop muted preload></video>
          </div>
        </template>
        
        <script>
          export default {
            data () {
              return {
                videoURL: ''
              }
            },
            computed: {
              getBackgroundVideo() {
                const videos = ['video1.mp4', 'video2.mp4', 'video3.mp4']
                const randomIndex = Math.floor(Math.random() * videos.length)
                return videos[randomIndex]
              }
            },
            created() {
              this.videoURL = this.getBackgroundVideo
            }
          }
        </script>
    

五、Vue動態背景代碼

Vue動態背景代碼通過<iframe>或<script>標籤引入外部代碼，動態改變代碼實現動態背景效果。

    
        <template>
          <div>
            <iframe :src="codeURL" frameborder="0"></iframe>
          </div>
        </template>
        
        <script>
          export default {
            data () {
              return {
                codeURL: ''
              }
            },
            computed: {
              getBackgroundCode() {
                const codes = ['https://codepen.io/pen/', 'https://jsfiddle.net/', 'https://stackblitz.com/edit/']
                const randomIndex = Math.floor(Math.random() * codes.length)
                return codes[randomIndex]
              }
            },
            created() {
              this.codeURL = this.getBackgroundCode
            }
          }
        </script>
    

六、Vue動態背景組件

Vue動態背景組件的實現需要先在組件內定義更新背景的函數，然後通過this.$parent找到父組件，在需要更改背景的時候調用父組件的背景更新函數達到更新背景的目的。

    
        <template>
          <div @click="updateBackground">
            <h2>Vue動態背景組件</h2>
          </div>
        </template>
        
        <script>
          export default {
            methods: {
              updateBackground() {
                this.$parent.updateBackground()
              }
            }
          }
        </script>
    

七、Vue動態背景插件

Vue動態背景插件的實現需要先定義插件的名稱和安裝函數，然後在安裝函數中定義組件和添加指令，實現插件化的動態背景。

    
        <template>
          <div v-update-background>
            <h2>Vue動態背景插件</h2>
          </div>
        </template>
        
        <script>
          export default {
            directives: {
              updateBackground(el, binding) {
                const { value } = binding
                el.style.backgroundImage = `url(${value})`
              }
            }
          }
          
          export const VueDynamicBackground = {
            install(Vue) {
              Vue.component('dynamic-background', this)
              Vue.directive('update-background', this.directives.updateBackground)
            }
          }
        </script>
    

八、Vue動態組件

Vue動態組件可以根據currentComponent變量的值，動態地切換組件，實現動態背景的效果。

    
        <template>
          <div>
            <component :is="currentComponent"></component>
          </div>
        </template>
        
        <script>
          import BackgroundImage from './BackgroundImage.vue'
          import BackgroundVideo from './BackgroundVideo.vue'
          
          export default {
            components: {
              'background-image': BackgroundImage,
              'background-video': BackgroundVideo
            },
            data() {
              return {
                currentComponent: 'background-image'
              }
            },
            methods: {
              toggleComponent() {
                this.currentComponent = this.currentComponent === 'background-image' ? 'background-video' : 'background-image'
              }
            },
            mounted() {
              setInterval(() => {
                this.toggleComponent()
              }, 5000)
            }
          }
        </script>
    

九、Vue動態表單

Vue動態表單需要先定義表單的數據和更新函數，然後在背景組件中設置watch監聽表單字段的值的變化，從而動態更新背景。

    
        <template>
          <div>
            <form>
              <label>背景顏色：</label>
              <input type="color" v-model="backgroundColor">
            </form>
          </div>
        </template>
        
        <script>
          export default {
            data() {
              return {
                backgroundColor: '#ffffff'
              }
            },
            watch: {
              backgroundColor(newVal) {
                this.$parent.updateBackground(newVal)
              }
            }
          }
        </script>