vue图片查看器插件 vue-photo-preview

这个插件可以在移动端使用哟~~

第一步 在项目下载插件

npm install vue-photo-preview 

第二步 引用配置 main.js里添加一下代码

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

第三步 在页面中直接使用

这里说一下渲染的几种情况

1.单个图片直接渲染

<img src="路径" alt="" preview="1"></swiper-item>

效果图：

2.分组图片直接渲染 preview值为相同则为一组

<img src="路径" alt="" preview="1"></swiper-item>
<img src="路径" alt="" preview="1"></swiper-item>
<img src="路径" alt="" preview="1"></swiper-item>
<img src="路径" alt="" preview="1"></swiper-item>

效果图：

3.异步加载图片渲染 图片加载完成后执行this.$previewRefresh()
html代码

<div class="uoload">
      <div class="item" v-for="(item, index) in 4" :key="index"  v-if="arr.length >= index">
        <img :src="arr[index]" alt="" v-if="arr.length >= index + 1" preview="1">
        <img src="../assets/images/clean.png" alt="" class="clean" v-if="arr.length >= index + 1" @click="arr.splice(index, 1)">
        <input type="file" @change="upload($event)" v-if="arr.length <= index">
      </div>
    </div>

js代码

data () {
  return {
    arr: []
  }
},
methods: {
  upload (e) {
    let file = e.target.files[0]
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = (e) => {
      this.arr.push(e.target.result)
      this.$previewRefresh()
    }
  }
}

css代码

.uoload {
      display: flex;
      align-items: center;
      padding: 20px 0 20px 15px;
      .item {
        width:76px;
        height:76px;
        position: relative;
        background: url(../assets/images/upload.png) no-repeat;
        background-size: 100% 100%;
        margin-right: 15px;
        input {
          width:76px;
          height:76px;
          outline: none;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          opacity: 0;
        }
        >img:nth-of-type(1) {
          width:76px;
          height:76px;
        }
        .clean {
          position: absolute;
          right: -7px;
          top: -7px;
          width:14px !important;
          height:14px !important;
        }
      }
    }

大致的效果图

相关文档： https://npm.taobao.org/package/vue-photo-preview