小小vue2.0圖片查看器

一個 小小vue2.0的圖片查看器組件

閒暇下來封裝了一個 vue2.0的圖片查看器組件，經過這個更能方便清楚地查看列表的一張張圖片。已經兼容 pc 跟移動端，經過 npm 來下載安裝使用。
This is an example

一、安裝

npm install vue-imageview --save

二、使用

// example

<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>

三、參數配置

參數	類型	說明	必要
imgArr	array	圖片數組	是
show	blooean	顯示組件開關	是
imageIndex	number	從第幾張圖片開始顯示	No

ps: 之後會更新到多指操做，放大、縮小、選擇，加文字說明等等等等，湊字湊字數~湊字湊字數~湊字湊字數~
自勉吧~~~