vue中使用vue-picture-preview 图片查看器

在vue 中引入vue-picture-preview 实现图片点击查看的功能

本想贴demo的效果视频，找来找去没看到怎么贴视频，囧~ 现在贴图吧

一.页面的整体效果

二、点击第一张图片的效果

三、点击第二张图片的效果

贴完发现图片有点大，懒得去处理了，就酱吧，废话不说上代码。

1.安装依赖

cnpm install --save-picture-preview

2.在main.js中引入vue-picture-preview

import vuePicturePreview from 'vue-picture-preview'  //引入图片查看器

3.在main.js中调用

Vue.use(vuePicturePreview);

4.在根组件中放置

<lg-preview></lg-preview>

啰嗦几句，一定是根组件中！！！我一开始放错地方了，一直没法预览，一不小心进坑了！
我的项目根组件是App.vue，html代码如下

<template>
  <div id="app">
     <router-view></router-view>
     <lg-preview></lg-preview>
  </div>
</template>

配置完了，就可以在页面中正常使用了

1.HTML部分

<template>
  <div class="img_box"  >
    <p>图片查看器vue-picture-preview</p>
    <ul>
      <li  v-for="(img,index) in items">
          <img v-preview="img.img_url" :src="img.img_url"  :alt="img.title"
           preview-title-enable="true"
           preview-nav-enable="true"  v-bind:style="{width:img_w}">  
        <p>{{img.title}}</p>
      </li>
    </ul>
  </div>   
</template>

2.JS部分

<script type="text/javascript">
  export default{
    data(){
      return{ 
        img_w:((((window.screen.width)/33.333)*0.94)*0.5)+'rem',
        title:"图片查看器demo"  ,
        items:[
              {
                title:"图片1",
                img_url:require("../../assets/images/img_1.jpg"),
              },
              {
                title:"图片2",
                img_url:require("../../assets/images/img_2.jpg"),
              },
              {
                title:"图片3",
                img_url:require("../../assets/images/img_3.jpg"),
              },
              {
                title:"图片4",
                img_url:require("../../assets/images/img_04.jpg"),
              },
        ],  
      }
    },
    mounted:function(){
    },
    methods:{
    },
    props:{
    },
  }
</script>

3.CSS部分

<style type="text/css">
.img_box{
  width: 100%;
  overflow: auto 
}
.img_box p:first-child{
  line-height: 2rem;
  font-size: 0.6rem;
  text-align: center;
}
.img_box ul{
  width: 100%;
}
.img_box li{
    list-style: none;
    margin-left: 2%;
    overflow: hidden;
    float: left;
}
li p{
  line-height: 1rem;
  font-size:0.5rem;
  text-align: center;
}
</style>

结束，如有问题欢迎指正！还有用到的美图来源见水印。