vue 实现图片预览

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,可以根据自己的项目实际需求进行优化