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.

vue-imageview

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

demo

1、Usage with Vue2.0

npm install vue-imageview --save

2、Using as your need

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

<script>
  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 () {
        this.show = true
      },
      hideImageView () {
        this.show = false
      },
      selectImg (index) {
        this.show = true
        this.imageIndex = index
      }
    }
  }
</script>

<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;
	}
</style>

3、Configuration

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