vue点击图片放大(可左右切换,旋转等多种效果)

这个插件功能非常强大,支持图片多种效果,vue项目用它就对了.

第一步安装依赖

npm install v-viewer --save

第二步在main.js中导入

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
  }
})

第三步看下完整vue代码

<template>
  <viewer :images="image">
    <img :src="item.src"  v-for="(item,index) in list" :key="index"/>
  </viewer>
</template>

<script>
export default {
  data() {
    return {
	  list:[
		{src:require('@/assets/1.jpg')},
		{src:require('@/assets/2.jpg')}
	  ]
    };
  },
};
</script>

 最后看一下效果图

---

在百转柔肠间,一天天地冷酷起来!