vue 图片放大和缩小的方式

一、使用viewerjs


文档：https://github.com/faimaklg/vue-viewerjs
1、安装命令：
npm install v-viewer --save  【可能装不上】
 


2、全局引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: {
    'inline': true, // 启用 inline 模式
    'button': true, // 显示右上角关闭按钮
    'navbar': true, // 显示缩略图导航
    'title': true, // 显示当前图片的标题
    'toolbar': true, // 显示工具栏
    'tooltip': true, // 显示缩放百分比
    'movable': true, // 图片是否可移动
    'zoomable': true, // 图片是否可缩放
    'rotatable': true, // 图片是否可旋转
    'scalable': true, // 图片是否可翻转
    'transition': true, // 使用 CSS3 过度
    'fullscreen': true, // 播放时是否全屏
    'keyboard': true, // 是否支持键盘
    'url': 'data-source' // 设置大图片的 url
  }
})




3、页面中使用

<viewer>
     <img :src="record.PreviewFileUrl"
                 style="width:80px;height:45px;"
                 alt=""
                 title="点击放大" />
</viewer>

第二种：vue-photo-preview使用介绍


1、先安装依赖
npm install vue-photo-preview --save
2、main.js内引用并注册调用

//main.js
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)




3、代码中使用xxx.vue



<template>
    <div class="content">
       <section>
        <h1>preview图片预览插件</h1>
        <img v-for="src in imgs" :src="src.url" :key="src.title" :preview="src.preview" :preview-text="src.title">
    </section>
   </div>
</template>
<script>
export default {
  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>




3、代码中使用xxx.vue



<template>
    <div class="content">
       <section>
        <h1>preview图片预览插件</h1>
        <img v-for="src in imgs" :src="src.url" :key="src.title" :preview="src.preview" :preview-text="src.title">
    </section>
   </div>
</template>
<script>
export default {
  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>

option配置请查看 http://photoswipe.com/documentation/options.html