iview 使用图片放大关闭 iviewer

安装

npm install v-viewer --save

在main.js里引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer)
Viewer.setDefaults({
  navbar: false, //底部缩略图
  toolbar: false, //底部工具栏
  button: false, //右上角按钮
  title: false, //当前图片标题
  movable: true, //是否可以移动
  zoomable: true, //是否可以缩放
  transition: false //使用 CSS3 过度
})

在vue界面里使用

{

title: "抓拍图片",

key: "deliver",

render: (h, params) => {

let _img = params.row.deliver; //因为现在后台返回来的只有一张图片，String类型。

let imgs = [_img]; //组装成数组

if (_img) {

return h(

"viewer",

{

props: {

images: imgs //数组

}

imgs.map(img => {

//循环显示

return h("img", {

attrs: {

src: img,

style: "width: 40px;height: 40px;"

}

});

})

);

} else {

return h("span", "");

}

iview 使用图片放大关闭 iviewer相关推荐

Android 点击图片放大至全屏再次点击关闭过度动画 Shared Element效果（共享元素效果）
Android 点击图片放大至全屏再次点击关闭过度动画最近项目需要给用户一个体验优化,各种查阅,然后改了很多地方,类似于图片的点击预览,消息列表的点击流畅过渡. Shared Element效果( ...
layui单元格鼠标样式_Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法...
如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/par ...
html 图片放大缩小轮播,jQuery左右滚动支持图片放大缩略图图片轮播代码分享
本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播 ...
移动端使用PhotoSwipe 图片放大浏览
先来几张效果图: 点击其中一张照片可放大,可支持图片文字描述: 同时支持分享功能: 支持手势放大缩小使用js框架是PhotoSwipe. PhotoSwipe是一个图片放大插件,兼容pc和移动端,经 ...
为什么把文字图片放大后有一圈彩色的像素方块，而不是纯黑色的
当我们把文字图片放大到一定程度后,我们可以明显的发现这个字居然不是纯黑色的,而是除黑色外还有很多彩色的像素方块组成的.如下图所示,我放大了五个m字母的图片的样子: 为什么会这样子呢?其实是微软的Cle ...
PhotoZoom的工具栏图片放大不失真
使用PhotoZoom能够对数码图片无损放大,备受设计师和业内人员的青睐,它的出现时一场技术的革新,新颖的技术,简单的界面,优化的算法,使得它可以对图片进行放大而没有锯齿,不会失真.本文为您一起来认识 ...
认识图片放大工具PhotoZoom的菜单栏
使用PhotoZoom能够对数码图片无损放大,备受设计师和业内人员的青睐,它的出现时一场技术的革新,新颖的技术,简单的界面,优化的算法,使得它可以对图片进行放大而没有锯齿,不会失真.本文为您一起来认识 ...
jquery 实现图片放大
文章目录一.html.Jquery代码如下二.效果 2.1.初始化加载的页面 2.2.鼠标放到图片上时(即 `hover` 事件 ), 图片放大为1.4倍 2.3.鼠标点击(即 `click` 事 ...
手机端点击图片放大特效-PhotoSwipe插件
PhotoSwipe插件官方网站 http://www.photoswipe.com/ PhotoSwipe插件能实现手机端点击图片全屏放大再双击图片放大等功能但有一点不太好的是图片放大后再单击不 ...

iview 使用图片放大关闭 iviewer

iview 使用图片放大关闭 iviewer相关推荐

最新文章

热门文章