一个简单地图片预览组件vue-img-previewer
组件展示
使用方式
- 安装
yarn add vue-img-previewer
npm i vue-img-previewer --save
- 然后在要使用的组件里按照下面的类似格式书写
<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 }
- 运行
yarn serve
npm run serve
参数
| 名称 | 功能 | 默认值 | 可选值 |
|---|---|---|---|
| viewerVisible | vue-previewer的可见性，必填值 | null | false |
| imgIndex | 图片的索引，必填值 | null | 0-~ |
| imgDataList | 图片的数据 | null | 数组类型按照{ title: 'xxx', url: 'xxxxxx.xxx', id: x } |
组件简单，注释详细，易于第二次开发
刚学了点ts和vue做了这个组件，主要是vue的组件有点少，我搜索的时候，只看见v-viewer这个封装了 viewer.js的组件和一些功能较少的组件，不易于维护和二次开发，于是我做了这个组件，我是刚入前端的新手，希望各位指点，如果可以献上你的star和fork，小生感激不尽
