18.Vue2-preview图片预览插件

Vue2-preview是图片预览插件，具体参考：vue2-preview

效果：

image.png

安装：

cnpm i vue2-preview -S

案例：src/preview/index.vue、图片存放路径：(src/preview/image/*.jpg)

<template>
  <div>
      <ul>
          <li v-for="(item, index) in list">
              <img class="preview-img" :src="item.src' height="100" @click="$preview.open(index, list)" />
          </li>
      </ul>
  </div>
</template>
<script>
// 导入vue
import Vue from 'vue';
// 导入vue2-preview
import VuePreview from 'vue2-preview';
//使用
Vue.use(VuePreview)

export default {
  data(){
    return {
        list: [
          {
              src: require('./image/1.jpg'),  //图片路径
              w: 600,              //图片预览时的宽
              h: 400               //图片预览时的高
          },
          {
              src: require('./image/2.jpg'),
              w: 1200,
              h: 900
          }
        ]
    }
  }
}
</script>
<style scoped>
ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
  margin: 5px !important;
}
</style>