vue项目中使用swiper时，部分按钮无法点击

问题描述

如图视频轮播图，使用swiper插件，部分视频轮播图上的按钮（放大及叉号）无法点击

问题原因（个人总结分析）

swiper在轮播的时候，为了保证轮播的连贯性，会复制一份数据源放在数组里面，也就是两份数据在页面上渲染，但他能只能复制DOM属性，但不能复制DOM事件，造成一部分Dom元素是没有绑定的点击事件的，导致无法点击

解决办法

方法1 给swiper绑定点击事件

<div>
    <swiper :options="option" ref="this_swiper">
        <swiper-slide v-for="(Item, index) in videoData" :key="index">
            <div class="video_item">
                <div class="video_item_tile">
                    // 按钮1所在  // 重点代码
                    // 将对象转成字符串传过去
                    // 将关键信息挂在自定义属性上 :data-
                    <div class="to_big_icon" id="to_big_iconID" :data-video-url = "JSON.stringify(Item)">div>
                    // 按钮2所在  // 重点代码
                    <img class="video_close_icon" src="/img/video-wall/video_close_icon.png" title="关闭">
                div>
                <iframe class="video_src"
                        :src="Item.url"
                        frameborder="0"
                        allow="autoplay"
                        allowfullscreen="true"
                        webkitallowfullscreen="true"
                        mozallowfullscreen="true"
                        width="380px"
                        height="210px"
                >iframe>
            div>
        swiper-slide>
    swiper>
div>

computed: {
     
	option: {
     
		let _this = this;
		let option = {
     
           direction: 'vertical',
           slidesPerView: 4,
           centeredSlides: false,
           // 开启鼠标滚轮切换
           mousewheel: true,
           // 开启鼠标点击切换
           slideToClickedSlide: false,
           // spaceBetween: window.innerWidth > 986 ? 16 : 9,
           // 解决初始化高度异常的问题
           height: 986,
           // 设置自动轮播
           autoplay: {
     
               delay: 5000,
               disableOnInteraction: false,
               pauseOnMouseEnter: true,
           },
           // 设置轮播可循环
           loop: true,
           // 重点代码
           on: {
     
               click: function (e) {
     
               	  // 重点代码
                   _this.showA(e);
               }
           }
       };
       return option;
	}
}

methods: {
     
	showA(e) {
     
		const domId = e.target.id;
		// 解构赋值到videoUrl并
		const {
      videoUrl } = e.target.dataset;
		const videoUrlObject = JSON.parse(videoUrl);
	}
}

方法2 事件委托监听

<div @click="handleClick($event)">
    <swiper :options="option" ref="this_swiper">
        <swiper-slide v-for="(Item, index) in videoData" :key="index">
            <div class="video_item">
                <div class="video_item_tile">
                    <div class="to_big_icon" id="to_big_iconID" :data-video-url = "JSON.stringify(Item)">div>
                    <img class="video_close_icon" src="/img/video-wall/video_close_icon.png" title="关闭">
                div>
                <iframe class="video_src"
                        :src="Item.url"
                        frameborder="0"
                        allow="autoplay"
                        allowfullscreen="true"
                        webkitallowfullscreen="true"
                        mozallowfullscreen="true"
                        width="380px"
                        height="210px"
                >iframe>
            div>
        swiper-slide>
    swiper>
div>

methods: {
     
	handleClick(e) {
     
		const domId = e.target.id;
		const {
      videoUrl } = e.target.dataset;
		const realvideoUrl  = JSON.parse(videoUrl);
	}
}

总结

// 将对象/数组 转成字符串
JSON.stringfy();
// 将字符串转成JSON对象
JSON.parse();