介绍一款好用的图片预览放大缩小的插件

转载：https://github.com/fengyuanchen/viewerjs

预览效果：https://fengyuanchen.github.io/viewerjs/

 

在vue中的简单用法

第一步：安装插件 

npm install viewerjs

第二步：在组件中引入

import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';

 下面是在组件中使用的例子：

插件还有许多配置项，详情可参考作者的github：https://github.com/fengyuanchen/viewerjs

<template>
    <div class='container'>

        <div style="margin: 100px 300px;">
            <h1>Viewer图片预览插件</h1>
            <div style="width: 300px;">
                <img ref="image" src="@/assets/20151127114401_AKHjy.jpeg" alt="Picture" style="width: 80%;">
            </div>
        </div>
    </div>
</template>

<script>

  import Viewer from 'viewerjs';
  import 'viewerjs/dist/viewer.css';
  export default {
    name: 'index',
    components: {
      Cascader
    },
    data(){
      return{


      }
    },
    mounted(){
      // View an image
      const viewer = new Viewer(this.$refs.image);


    },
    methods: {


    }
  }
</script>

<style scoped>


</style>

效果如下：

引入本地图片，并显示

<template>
    <div class='container'>
        <div style="margin-top: 100px;" ref="imageList">
            <h1>Viewer图片预览插件</h1>
            <div style="width: 300px;display: inline-block;" v-for="item in imgs">
                <img ref="image" :src="item" alt="Picture" style="width: 80%;">
            </div>
        </div>
    </div>
</template>

<script>

  import Viewer from 'viewerjs';
  import 'viewerjs/dist/viewer.css';
  import img1 from '@/assets/20151127114401_AKHjy.jpeg'
  import img2 from '@/assets/131131113416992x0ihdbg7_medium.jpg'
  import img3 from '@/assets/oYYBAFOpMQSICdfTABWEAqeTaUQAABopQJHyGoAFYQa258.jpg'
  import img4 from '@/assets/qqqq.jpg'
  export default {
    name: 'index',
    components: {
      img1,
      img2,
      img3,
      img4
    },
    data(){
      return{
        imgs: [img1, img2, img3, img4]


      }
    },
    mounted(){
   
      const viewer = new Viewer(this.$refs.imageList,{
        navbar: true, //底部缩略图
        title: true, //当前图片标题
        keyboard: true //是否支持键盘
      });


    },
   
  }
</script>

 效果如下：