如何在滑块、vue 中使用多个 Clappr？

Question

我创建了一个包含多个图像和视频的滑块。我使用 Swiper 和 Clappr（视频播放器），但 clappr 不适用于多个视频。

我试图通过一个循环来修复它（代码如下），但即便如此，该脚本仅适用于第一个视频。

Vue v.3.1、Clappr v.0.3、Swiper v.4.5。

<section class="content__slider swiper-container"
         v-if="project_data && project_data.length">

    <ul class="swiper-wrapper">
        <li v-for="(object, index) in project_data" :key="index"
            class="content-item swiper-slide">

            <!-- it'll be show, if obj type is images -->
            <v-lazy-image v-if="object.type === 'images'"
                          :src="object.data"
                          class="content-img"/>

            <!-- it'll be show, if obj type is video -->
            <div v-if="object.type === 'video'"
                 class="content-video"
                 :id="'container_' + index"></div>

        </li>
    </ul>

</section>

import axios from 'axios'
import Swiper from "swiper/dist/js/swiper.esm.bundle";
import VLazyImage from "v-lazy-image";
import Clappr from 'clappr'

import 'swiper/dist/css/swiper.min.css'

export default {
    name: "Project",
    data: () => ({
        project_data: [], // data of project
        project_images: [], // arr of images
        project_videos: [], // arr of videos
    }),
    created() {

        axios.get('/getWorks/' + this.$route.params.name)
            .then(response => {

                 let arr = [];

                 this.project_images = response.data.work_images;
                 let images = response.data.work_images;

                 this.project_videos = response.data.work_videos;
                 let videos = response.data.work_videos;

                 for (let i = 0; i < images.length; i++) {
                     arr.push({"type": "images", "data": "/storage/" + images[i]});
                 }
                 for (let i = 0; i < videos.length; i++) {
                     arr.push({"type": "video", "data": "/storage/" + videos[i]});
                 }

                 this.project_data = arr;

            })
            .then(() => {

                // init slider
                new Swiper('.content__slider', {
                    mousewheel: true,
                    keyboard: true,
                    speed: 1200,
                    navigation: {
                        nextEl: '.content-arrow.swiper-button-next',
                        prevEl: '.content-arrow.swiper-button-prev',
                    },
                    pagination: {
                        el: '.content-pagination.swiper-pagination',
                        type: 'fraction',
                    },
                    breakpoints: {
                        959: {
                            zoom: {
                                maxRatio: 5,
                                toggle: true,
                                containerClass: '.content__slider',
                                zoomedSlideClass: '.content-item'
                            },
                        }
                    }
                });

                // init clappr (video player)
                if ( document.querySelector('.content-video') ) {
                    for (let i = 0; i < this.project_videos.length; i++) {
                        new Clappr.Player({
                            source: '/storage/' + this.project_videos[i],
                            parentId: '#container_' + (this.project_images.length - i),
                            mute: true,
                            width: document.querySelector('.content-item').offsetWidth,
                            height: document.querySelector('.content-item').offsetHeight
                        });
                    }
                }
            });
    }
}

它适用于数组中的第一个视频，但不适用于以下视频

Answer 1

生活和学习，我没有注意到我的错误。

parentId: '#container_' + (this.project_images.length + i)

有必要总结一下。现在，它可以工作了）

Answer 2

您的问题是：

1. 您正在创建的钩子上初始化 clappr（不理想）
2. 由于使用了 `v-if
，您只初始化了第一个

created 钩子在组件完成构建其 DOM 之前触发，因此理论上，您将无法通过您的 document.querySelector 找到任何元素。

为什么会这样？

由于您在异步函数（来自 axios 的 ajax 调用）中运行此 querySelector，这意味着服务器响应您对 /getWorks/ 的调用所花费的时间，浏览器已完成创建 DOM。这纯粹是运气，不是你想做的。

#1 的解决方案； 将已创建的挂钩更改为已安装的挂钩。 – Mounted 是 Vue 用来告诉您 DOM 已构建并完成的钩子。

第二个问题是您使用 v-if 来“隐藏”其他元素。 v-if 从 DOM 中完全删除元素。这使您的 querySelector 无法找到它并对其进行初始化。 （因为只有一个，这是你的第一个元素：

所以，该脚本仅适用于第一个视频。

#2 的解决方案 将 v-if 更改为 v-show - v-show 将元素保留在 DOM 中，但通过 CSS 隐藏它。因此它可以通过 querySelector 访问。