2022年5月9日17:24:08

src/components/VideoBackround/VideoBackground.vue

@@ -2,9 +2,7 @@
   <section class="VideoBg">
     <video ref="video" autoplay loop muted>
       <!-- autoplay 立马播放 loop 循环播放 muted 静音播放-->
-      <div :v-if="sources">
-        <source v-for="source in sources" :src="source" :type="getMediaType(source)" />
-      </div>
+      <source v-for="source in sources" :src="source" :type="getMediaType(source)" />
     </video>
     <div class="VideoBg__content">
       <slot />
@@ -13,125 +11,124 @@
 </template>
 
 <script>
-  export default {
-    props: {
-      sources: {
-        type: Array,
-        required: true,
-      },
-      img: {
-        type: String,
-      },
-      height: {
-        type: Number,
-      },
+export default {
+  props: {
+    sources: {
+      type: Array,
+      required: true,
     },
+    img: {
+      type: String,
+    },
+    height: {
+      type: Number,
+    },
+  },
+
+  data() {
+    return {
+      videoRatio: null,
+    }
+  },
+
+  mounted() {
+    // 创建完实体后
+    this.setImageUrl() // 判断是否为图片则显示图片
+    this.setContainerHeight() // 设置高度
+
+    if (this.videoCanPlay()) {
+      // 视频显示
+      this.$refs.video.oncanplay = () => {
+        if (!this.$refs.video) {
+          return
+        }
 
-    data() {
-      return {
-        videoRatio: null,
+        this.videoRatio = this.$refs.video.videoWidth / this.$refs.video.videoHeight // 获取视频高宽比例
+        this.setVideoSize()
+        this.$refs.video.style.visibility = 'visible' // 显示视频
       }
-    },
+    }
+
+    window.addEventListener('resize', this.resize)
+  },
 
-    mounted() {
-      // 创建完实体后
-      this.setImageUrl() // 判断是否为图片则显示图片
-      this.setContainerHeight() // 设置高度
+  beforeUnmount() {
+    window.removeEventListener('resize', this.resize)
+  },
+
+  methods: {
+    // 方法对象
+    resize() {
+      this.setContainerHeight()
 
       if (this.videoCanPlay()) {
-        // 视频显示
-        this.$refs.video.oncanplay = () => {
-          if (!this.$refs.video) {
-            return
-          }
-
-          this.videoRatio = this.$refs.video.videoWidth / this.$refs.video.videoHeight // 获取视频高宽比例
-          this.setVideoSize()
-          this.$refs.video.style.visibility = 'visible' // 显示视频
-        }
+        this.setVideoSize()
       }
-
-      window.addEventListener('resize', this.resize)
     },
 
-    beforeUnmount() {
-      window.removeEventListener('resize', this.resize)
+    videoCanPlay() {
+      return !!this.$refs.video.canPlayType
     },
 
-    methods: {
-      // 方法对象
-      resize() {
-        this.setContainerHeight()
-
-        if (this.videoCanPlay()) {
-          this.setVideoSize()
-        }
-      },
-
-      videoCanPlay() {
-        return !!this.$refs.video.canPlayType
-      },
-
-      setImageUrl() {
-        if (this.img) {
-          this.$el.style.backgroundImage = `url(${this.img})`
-        }
-      },
+    setImageUrl() {
+      if (this.img) {
+        this.$el.style.backgroundImage = `url(${this.img})`
+      }
+    },
 
-      setContainerHeight() {
-        this.$el.style.height = this.height || `${window.innerHeight}px`
-      },
+    setContainerHeight() {
+      this.$el.style.height = this.height || `${window.innerHeight}px`
+    },
 
-      setVideoSize() {
-        let width
-        let height
-        const containerRatio = this.$el.offsetWidth / this.$el.offsetHeight // 获取屏幕高宽比例
+    setVideoSize() {
+      let width
+      let height
+      const containerRatio = this.$el.offsetWidth / this.$el.offsetHeight // 获取屏幕高宽比例
 
-        if (containerRatio > this.videoRatio) {
-          width = this.$el.offsetWidth
-        } else {
-          height = this.$el.offsetHeight
-        }
+      if (containerRatio > this.videoRatio) {
+        width = this.$el.offsetWidth
+      } else {
+        height = this.$el.offsetHeight
+      }
 
-        this.$refs.video.style.width = width ? `${width}px` : 'auto'
-        this.$refs.video.style.height = height ? `${height}px` : 'auto'
+      this.$refs.video.style.width = width ? `${width}px` : 'auto'
+      this.$refs.video.style.height = height ? `${height}px` : 'auto'
 
-        // this.$refs.video.style.width = this.$el.offsetWidth
-        // this.$refs.video.style.height = this.$refs.video.videoHeight - 20 + 'px'
-      },
+      // this.$refs.video.style.width = this.$el.offsetWidth
+      // this.$refs.video.style.height = this.$refs.video.videoHeight - 20 + 'px'
+    },
 
-      getMediaType(src) {
-        // 获取文件类型
-        return 'video/' + src.split('.').pop()
-      },
+    getMediaType(src) {
+      // 获取文件类型
+      return 'video/' + src.split('.').pop()
     },
-  }
+  },
+}
 </script>
 
 //相对定位 center(中间) cover(覆盖) overflow: hidden(溢出隐藏)
 <style>
-  .VideoBg {
-    position: relative;
-    background-size: cover;
-    background-position: center;
-    overflow: hidden;
-  }
-
-  .VideoBg video {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    visibility: hidden;
-    transform: translate(-50%, -50%);
-  }
-
-  /* 内容浮动显示在上方*/
-
-  .VideoBg__content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-</style>
+.VideoBg {
+  position: relative;
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
+}
+
+.VideoBg video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  visibility: hidden;
+  transform: translate(-50%, -50%);
+}
+/* 内容浮动显示在上方*/
+
+.VideoBg__content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/system/login/Login.vue

@@ -55,6 +55,8 @@
   const bgVideo = bgTwo
   const verify = ref(false)
 
+  console.log(bgVideo);
+
   const item = reactive({
     account: 'admin',
     password: '123456',