@michaelray/vue-viewer

vue-viewer（vue图片播放器）

main.js

import VViewer from "@michaelray/vue-viewer";
Vue.use(VViewer);

demo

<template>
	<div id="app">
		<v-viewer
			ref="viewer"
			:options="options"
			:images="images"
			class="viewer"
			@init="init"
			@ready="ready"
			@show="show"
			@shown="shown"
			@viewed="viewed"
			@hidden="hidden"
		>
			<template slot-scope="scope">
				<p v-for="(src,key) in scope.images" :key="src">
					<img :id="'img_'+key" class="img" :src="src">
				</p>
			</template>
		</v-viewer>
	</div>
</template>

<script>

export default {
	data () {
		return {
			images: [
				"http://image.gulove.com/uploads/2021/0618/60cc46d89dc51_562_1000.jpg",
				"http://image.gulove.com/uploads/2021/0618/60cc46d8bf6c8_562_1000.jpg",
				"http://image.gulove.com/uploads/2021/0618/60cc46d8e2c6b_562_1000.JPG",
				"http://image.gulove.com/uploads/2021/0618/60cc46d9186d2_562_1000.jpg",
				"http://image.gulove.com/uploads/2021/0618/60cc46d936a6f_562_1000.jpg"
			],
			options:{
				title:false,
				//zoomable: false,
				fullscreen:true
			}
		}
	},
	computed: {
	},
	methods: {
		init(e) {
			console.log('init', e)
		},
		ready(e) {
			console.log('ready', e)
		},
		show(e) {
			console.log('show', e)
		},
		shown(e) {
			console.log('shown', e)
		},
		hidden(e) {
			console.log('hidden', e)
		},
		viewed(e) {
			console.log('viewed', e)
			console.log('viewed', e.detail.originalImage.offsetTop);
			//const top = e.detail.originalImage.offsetTop;
			//document.getElementsByClassName('beauty-scroll')[1].scrollTop = top;
		},

	},
};
</script>

<style lang="less">
.img {
	width: 300px;
	cursor: pointer;
}

</style>