个人使用vue-gallery，不是v-gallery的使用笔记

本次案例是如何使用  vue-gallery查看视频

  <!-- 详情查看视频 -->

    <gallery :images="spotImages" :index="spotImagesIndex" @close="spotImagesIndex = null" id="video"

    ></gallery>

data中的测试数据样式

viedeoList: [

          {

            title: '测试1',

            type: 'video/mp4',

            href: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',

            poster: 'https://vdposter.bdstatic.com/ce7f68826b2a6fa0b7fe63057e70d7f3.jpeg?x-bce-process=image/resize,m_fill,w_352,h_234/format,f_jpg/quality,Q_100'

          },

          {

            title: '测试2',

            type: 'video/mp4',

            href: 'http://vjs.zencdn.net/v/oceans.mp4',

            poster: 'https://img-blog.csdnimg.cn/20190301125255914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAxMDE5OA==,size_16,color_FFFFFF,t_70'

          }

        ],

//点击查看图片/视频的详情

      spotImagesClick(index){

        this.spotImages = this.viedeoList

        this.spotImagesIndex = index;

      },

 

图片就比较简单了，直接给图片的地址数组即可