魔改Element UI：修改el-image成el-video，点击小图，展示视频大图预览，并且可以左右切换视频

产品要的需求

列表展示首图，点击大图可以看图片列表，左右切换
列表展示第一个视频的首帧图片，点击可以查看视频，视频也可以左右切换

第一个很简单，Element UI 官网例子大图预览就可以做到

第二个没有现成的，要自己写吗？

自己写，展示图片，点击图片弹出弹窗，弹窗有 video 标签展示视频，切换上个下个视频的时候，切换地址就行，也不用真的加载出好几个video标签，那样还要考虑切换视频的时候，暂停上个视频。还是直接切换视频url方便。

可是样式…就会一言难尽了。

可以复用el-image吗

可以

看了下源码，内容不多，最关键的是，里面引用的方法和组件，没有采用相对地址，而直接从依赖里面读取。

这意味着，我可以直接把内容copy出来改改再引用。

需要改动的点

main.vue

展示小图的url，我的视频url是阿里云oss存储的url，读取首帧图片需要再url上做点手脚

下面只修改了一下src

 <img
  v-else
  class="el-image__inner"
  v-bind="$attrs"
  v-on="$listeners"
  @click="clickHandler"
  :src="src + '?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast,ar_auto'"
  :style="imageStyle"
  :class="{ 'el-image__inner--center': alignCenter, 'el-image__preview': preview }"
/>

video-viewer.vue

大图预览里面，只要把展示的img替换成video即可

其他的就不要动了

<!-- CANVAS -->
<div class="el-image-viewer__canvas">
<template v-for="(url, i) in urlList">
  <video
    v-if="i === index"
    ref="img"
    controls
    class="el-image-viewer__img"
    :key="url"
    :style="imgStyle"
    @load="handleImgLoad"
    @error="handleImgError"
    @mousedown="handleMouseDown"
  >
    <source :src="currentVideo" type="video/webm" />
    <source :src="currentVideo" type="video/mp4" />
    您的浏览器不支持 video 标签。
  </video>
</template>
</div>