viewerjs使用方法

提示：今天使用viewerjs来播放图片，需要触发到图片的show、hide方法，记录一下，方便日后查看。

---

前言

直接上代码

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、下载包

npm i viewerjs

二、文件代码

可局部引入，即：在需要用到的页面引入。

  <template>
   <div id="index">
   	  //  配置 :options="options" 
      <viewer :images="preImgList" :options="options">
            <img v-for="(src,index) in preImgList" :src="src.img" :key="index" style="width:400px;height:200px">
            <div ref="nodata" style="text-align: center;margin-top:100px;" v-if="!preImgList.length">暂无数据</div>
      </viewer>
    </div> 
</template>

<script>
// 引入 viewerjs 文件
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'

export default {
  data() {
    return {
      message: "home",
      preImgList:[
        {img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20190508%2F18%2F1557310449-TxUZvFrqsd.jpg&refer=http%3A%2F%2Fimage.biaobaiju.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622003971&t=ef8e8131c56a6cf067d5c5554a9f611d'},
        {img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F2c.zol-img.com.cn%2Fproduct%2F124_500x2000%2F748%2FceZOdKgDAFsq2.jpg&refer=http%3A%2F%2F2c.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622003971&t=4a1519aaa7643d6eba821aa94c77035e'},
        {img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F46%2F80%2F42bOOOPIC94.jpg&refer=http%3A%2F%2Fpic2.ooopic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622003971&t=7d716b47ab75d24bcdabbf5f1bae9c29'}
      ],
         options:{  // options是一个对象 **** 重点是这里的配置
           title:false,
            show: () => {
                console.log(this.resetFile)
                if (this.resetFile) {
                    clearInterval(this.resetFile)
                };
                console.log('show')
            },
            hide: () => {
                console.log('hide')
                this.resetFile = setInterval(this.getQueryFileFun, 5 * 1000);
            }
            },
    };
  },
};
</script>

<style>
</style>