Basic Image Viewer For Vue.js 2

Basic Image Viewer For Vue.js 2

A basic image viewer component that enlarges/displays your images in a responsive, fullscreen popup window.


A Imageview component for Vue2.0 ---------vue 的H5图片查看器组件


1、Usage with Vue2.0

npm install vue-imageview --save

2、Using as your need

	<div class="hello">
		<transition name="slide-fade" class="fadeView">
			<div v-if="show">
				<image-view :imgArr="imgArr" 
		<h1 @click="showImgView">显示隐藏</h1>
		<img v-for="(item, index) in imgArr" :src="item" @click="selectImg(index)">

  import imageView from 'vue-imageview'
  export default {
    name: 'hello',
    components: {
      'image-view': imageView
    data () {
      return {
        // 图片数组
        imgArr: ['/public/img/1.jpeg', '/public/img/2.jpeg', '/public/img/2.jpeg', '/public/img/3.jpeg', '/public/img/4.jpeg', '/public/img/5.jpeg', '/public/img/6.jpeg'],
        // 显示组件
        show: false,
        // 从哪一张图片开始
        imageIndex: 0
    methods: {
      showImgView () { = true
      hideImageView () { = false
      selectImg (index) { = true
        this.imageIndex = index

<style scoped>
	.slide-fade-enter-active {
		transition: opacity .5s ease;

	.slide-fade-leave-active {
		transition: opacity .5s ease;

	.slide-fade-enter, .slide-fade-leave-active {
		opacity: 0;
	h1, h2 {
		margin: 0;
		padding: 0;
	img {
		display: block;
		margin: 10px auto;
		max-width: 400px;


Param Type Description Required
imgArr array The list of images to view Yes
show blooean The flag of images to view Yes
imageIndex number The start of images to view No
hideImage function The callback function of images to close Yes

Github Repository

Tags: #VueJs