一个简单地图片预览组件vue-img-previewer

github页面

组件展示

使用方式

1. 安装

yarn add vue-img-previewer

npm i vue-img-previewer --save

2. 然后在要使用的组件里按照下面的类似格式书写

<template>
  <div class="hello">
    <li v-for="(item,index) in imgDataList"
        :key="index">
      <img :src="item.url"
           style="width:300px;height:auto;cursor: zoom-in"
           @click="showViewer(index)"></li>
    <ImgPreview :viewerVisible.sync="viewerVisible"
                :imgDataList.sync="imgDataList"
                :imgIndex.sync="imgIndex"
                ref="ImgPreview"></ImgPreview>

  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import {ImgPreview} from 'vue-img-previewer';

@Component({
  components: {
    ImgPreview,
  },
})
export default class HelloWorld extends Vue {
  public viewerVisible: boolean = false; // 子组件中viewer的可见性
  public imgIndex: number = 100; // 图片的索引
  public imgDataList: any[] = [
    { title: 'secend', url: require('./testImg/261652.jpg'), id: 2 },
    { title: 'third', url: require('./testImg/164F25161-2.jpg'), id: 3 },
    { title: 'four', url: './testImg/596296.jpg', id: 4 },
    { title: 'five', url: require('./testImg/timg.jpg'), id: 5 },
    { title: 'six', url: require('./testImg/245484.jpg'), id: 6 },
  ]; // 得到的img的数据，请务必按照这个格式写
  public showViewer(index: number) {
    this.imgIndex = index;
    setTimeout(() => {
      this.viewerVisible = true;
      (this.$refs.ImgPreview as any).init(this.imgIndex);
    }, 0)
  }
}
</script>

上面为了简单测试，直接用了require，这里可以是从后端拿到的base64数据

图片数据的格式需为
{ title: 'xxx', url: 'xxxxxx.xxx', id: x }

3. 运行

yarn serve

npm run serve

参数

组件简单，注释详细，易于第二次开发

刚学了点ts和vue做了这个组件，主要是vue的组件有点少，我搜索的时候，只看见v-viewer这个封装了 viewer.js的组件和一些功能较少的组件，不易于维护和二次开发，于是我做了这个组件，我是刚入前端的新手，希望各位指点，如果可以献上你的star和fork，小生感激不尽