提示:今天使用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>