vue点击后html放大,vue使用viewerjs实现图片点击放大

最新推荐文章于 2024-08-21 23:57:05 发布

weixin_39770416

最新推荐文章于 2024-08-21 23:57:05 发布

阅读量474

点赞数

文章标签： vue点击后html放大

前年分享过一篇点击放大功能 VUE中使用插件实现点击图片放大功能，但是这个只能点击之后预览放大，不能在移动端双指放大，也不能翻转旋转之类，本次分享另一款插件viewerjs来实现图片放大预览。

首先，我们在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, "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" }

});

在页面中使用

这样就完成了。

当然，如果你想实现放大之后，可以左右滑动查看其它图片，如下所示

在data中定义(或者返回的数据格式)data () {

return {

list: [

{

imgUrl: 'http://cdn.iqzhan.com/qzhan/img/82.jpg'

{

imgUrl: 'http://cdn.iqzhan.com/qzhan/img/58.jpg'

}