完美适配移动端基于vue的图片查看器(viewerjs )

**

完美适配移动端基于vue的图片查看器(viewerjs )

**
最近无聊，就在研究移动端点击图片，图片铺满屏幕的查看器效果，话不多说先找插件，找啊找，最终我选择了（viewerjs）因为功能比较多，具体我就不说了，大家可以去看看文档之类的，以下是效果图。




以下是代码

//main.js
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer);
Viewer.setDefaults({
  Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
});

//app.vue
<!--  -->
<template>
<div class=''>
    <div class="content">
        <h1>Viewer图片预览插件</h1>
        <viewer :images="imgs">
            <img style="width:100%;heigth:200px" v-for="src in imgs" :src="src.url" :key="src.title">
        </viewer>
   </div>
</div>
</template>


<script>
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
       imgs: [
       {
          url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',
          title: '图片1',
          preview: '1'
        },
        {
          url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg',
          title: '图片2',
          preview: '1'
        }
       ]
};
},
}
</script>

好的大功告成