vue实现图片预览

现在很多的项目里面图片展示缩略图,然后点击实现图片预览,放大的功能
最近我的项目里面就遇见了这么个场景,我选用了插件进行处理

下面说下实现步骤

1、首先安装插件

npm install vue-photo-preview --save

插件地址

2、在main.js里面引入,全局使用

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)

3、在页面里面使用

<template><div class="content"><h1>preview图片预览Demo</h1><img v-for="src in imgs" :src="src.url" :key="src.title" :preview="src.preview" :preview-text="src.title"></div>
</template>
<script>
export default {data() {return {imgs: [{url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",title: "图片1",preview: "1"},{url:"https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",title: "图片2",preview: "1"}]};}
};
</script>
<style>
.content img {width: 80px;height: 80px;padding: 0 5px;
}
</style>

效果

移动端效果


pc的效果

这里简单写了一个demo,可以根据自己的项目实际需求进行优化