Vue3, PC端swagger适配以视频为背景，兼容视频点击播放和滑动切换

效果图

Swagger

Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。
总体目标是使客户端和文件系统作为服务器以同样的速度来更新。文件的方法、参数和模型紧密集成到服务器端的代码，允许 API 来始终保持同步。Swagger 让部署管理和使用功能强大的 API 从未如此简单。

关键点

在swiper-slide中使用一个遮罩层，让用户滑动的时候实际是在遮罩层上滑动，而不是视频上，解决了视频的点击事件和swiper-slide滑动事件的冲突，然后在自定义遮罩层的点击播放\暂停逻辑实现。

引入插件

<script lang="ts">
	 import {
    Swiper, SwiperSlide } from 'swiper/vue';
	 import {
    Pagination, EffectCoverflow } from 'swiper/modules';
	 import 'swiper/css';
	 import 'swiper/css/pagination';
	 import 'swiper/css/effect-coverflow';
</script>

html

 <swiper
   :modules="modules"
   :centered-slides="true"
   :slides-per-view="'auto'"
   :space-between