vue 图片预览插件

https://github.com/daidaitu1314/vue2-preview

 

//cnpm
cnpm install vue2-preview -save

//引入
import VuePreview from 'vue2-preview'
Vue.use(VuePreview)

 

         <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)">

            list: [{
                      src: 'https://placekitten.com/600/400',
                      w: 600,
                      h: 400
                }, {
                      src: 'https://placekitten.com/1200/900',
                     w: 1200,
                      h: 900
                }],

图片宽度自适应

                //插件里写imgload获取图片宽高
                onRead(file) {
                      let img = new Image(); 
                      img.src = file.content;
                      let that = this;
                      img.onload = function () {   // 图片的宽高要做onload后才能获取到
                        that.imgList.push({
                              src:file.content,
                              msrc:file.content,
                              title: "图片",
                              w: img.width,
                              h: img.height
                        })
                      } 
                },