轮播图

src/views/video/index.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="video-box">
-    <video v-if="src.endsWith('.mp4')" width="100%" height="100%" controls loop autoplay muted :poster="poster">
-      <source :src="src" type="video/mp4">
+    <video v-if="srcList[0].endsWith('.mp4')" width="100%" height="100%" controls loop autoplay muted :poster="poster">
+      <source :src="srcList[0]" type="video/mp4">
     </video>
-    <img v-if="!src.endsWith('.mp4')" width="100%" height="100%" :src="src">
+    <el-carousel v-if="!srcList[0].endsWith('.mp4')" interval="6000">
+      <el-carousel-item v-for="src in srcList" :key="src">
+        <img width="100%" height="100%" :src="src">
+      </el-carousel-item>
+    </el-carousel>
   </div>
 </template>
 
@@ -16,7 +20,7 @@ export default {
   data() {
     return {
       poster: 'https://qiniu.aiyxlib.com/1658104787005.jpg',
-      src: ''
+      srcList: ['']
     }
   },
   created() {
@@ -33,8 +37,10 @@ export default {
 
       FetchShowFileList(params).then(res => {
         if (res.errCode === 0) {
-          const src = res.data[0].filePath.replace('D://', 'http://172.16.0.23:8888/')
-          this.src = src
+          // this.src = res.data[0].filePath.replace('D://', 'http://172.16.0.23:8888/')
+          this.srcList = res.data.map(x => x.filePath.replace('D://', 'http://172.16.0.23:8888/'))
+          // this.srcList = res.data.map(x => x.filePath.replace('D://uploadFile', 'http://localhost:8080/static/'))
+          // console.log(22222, this.srcList)
           // this.src = 'D://uploadFile/11503339-b829-4357-8379-d2b49106431f.mp4'.replace('D://', 'http://127.0.0.1:8888/')
           // this.src = 'http://127.0.0.1:8888/uploadFile/9f904de6-0f5e-498e-8e5d-b7e14ea15496.mp4'
         } else {
@@ -48,4 +54,11 @@ export default {
 
 <style lang="scss">
 @import "~@/assets/styles/index.scss";
+.el-carousel__container {
+  position: relative;
+  height: 100%;
+}
+.el-carousel.el-carousel--horizontal {
+  height: 100%;
+}
 </style>