imageViewer - 图片查看器

ImageViewer

Table Attributes

参数 说明 类型 可选值 默认值
urlList 图片列表 Array []
onChange 图片切换、缩放、旋转回调函数 (index 当前图片下标,data 参数 eg:{"scale":1.3,"deg":0,"offsetX":0,"offsetY":0,"enableTransition":true}) Function (index,data) => {}
navbar 缩略图展示开关 Boolean true
navbarFixed 缩略图悬浮/推拉 Boolean false
navbarInitStatus 缩略图默认展开状态 Boolean false
actions 操作 String 'zoomOut,zoomIn,screen,anticlocewise,clocelise' // 缩小,放大,全屏,逆时针,顺时针
options 设置 Object

options

参数 说明 类型 可选值 默认值
zoomRate 缩放比例 Number 0.1
rotateDeg 旋转角度 Number 90
enableTransition 方法旋转动画 Boolean true
showIconHover 鼠标移入热区显示上 Boolean false
hideIconDuration 鼠标移出热区隐藏按钮延迟时长 3000

demo

<template>
<div class="app-container">
<l-image-viewer
:url-list="srcList"
:on-change="onChange"
:navbar="showThumb"
:navbar-fixed="navbarFixed"
:actions="actionsStr"
:options="options"
/>
<div class="controls">
<h3>设置</h3>
<div>
鼠标移入热区显示上/下图
<el-switch v-model="options.showIconHover" />
</div>
<div>
鼠标移出热区隐藏按钮延迟时长
<el-input v-model="options.hideIconDuration" type="number" :min="0" placeholder="请输入内容" />
</div>
<div>
显示缩略图
<el-switch v-model="showThumb" />
</div>
<div>
缩略图模式随分辨率改变
<el-switch v-model="ModeOnResizeStatus" @change="changeModeOnResize" />
<div>(大于900时,采用【推拉】低于900时,采用【悬浮】)</div>
</div>
<div>
缩略图模式
<el-switch v-model="navbarFixed" active-text="浮动" inactive-text="推拉" />
</div>
<el-checkbox-group v-model="checkActions" @change="changeActions">
<el-checkbox v-for="(v, i) in actions" :key="i" :label="v" />
</el-checkbox-group>
<h3>说明</h3>
<div>鼠标滚轮放大缩小,鼠标按下拖动位置; 键盘左/右键切换上/下页,键盘上/下键切换放大缩小。</div>
</div>
</div>
</template>
<script>
import { rafThrottle } from '@lpg/l-ui/utils/util'
export default {
data() {
return {
showThumb: true,
navbarFixed: false,
ModeOnResizeStatus: true,
options: {
showIconHover: true, // 鼠标移入热区显示上/下图
hideIconDuration: 3000 // 鼠标移出热区隐藏按钮延迟时长
},
checkActions: ['zoomIn', 'zoomOut', 'screen', 'clocelise', 'anticlocewise'],
actionsStr: ['zoomIn', 'zoomOut', 'screen', 'clocelise', 'anticlocewise'].join(','),
actions: ['zoomIn', 'zoomOut', 'screen', 'clocelise', 'anticlocewise'],
srcList: [
'https://images.cnblogs.com/cnblogs_com/zc-lee/1901540/o_201216091158wugengji%20(1).jpg',
'https://images.cnblogs.com/cnblogs_com/zc-lee/1901644/o_2012161143007aec54e736d12f2e07615a764cc2d56285356844.jpg',
'https://images.cnblogs.com/cnblogs_com/zc-lee/1901644/o_2012161148532dcca28f8c5494ee50cec76029f5e0fe98257eea.jpg',
'https://images.cnblogs.com/cnblogs_com/zc-lee/1901644/o_201216114728013deab63aa80376386b4f983a184f6d.jpg',
'https://images.cnblogs.com/cnblogs_com/zc-lee/1901644/o_2012161146434e4a20a4462309f774fbcd07710e0cf3d7cad60b.jpg',
'https://images.cnblogs.com/cnblogs_com/zc-lee/1901644/o_201216114719be34b4c27d1ed21b5e262e84ab6eddc450da3f07.jpg',
'https://images.cnblogs.com/cnblogs_com/zc-lee/1901540/o_201216091241wugengji%20(2).jpg',
'https://images.cnblogs.com/cnblogs_com/zc-lee/1901644/o_2012161147562c6e26d3d539b60082cb6c6aec50352ac75cb702.jpg',
'https://images.cnblogs.com/cnblogs_com/zc-lee/1901540/o_201216091213wugengji%20(3).jpg',
'https://images.cnblogs.com/cnblogs_com/zc-lee/1901540/o_201216091229wugengji%20(4).jpg',
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
...Array(1).fill('https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg')
]
}
},
mounted() {
this.changeModeOnResize(this.ModeOnResizeStatus)
},
destroyed() {
// !Notice 清除resize事件
this.changeModeOnResize(false)
},
methods: {
onChange(index, transform) {
console.log('onChange', index, JSON.stringify(transform))
},
changeModeOnResize(val) {
if (val) {
window.onresize = rafThrottle(this.screenResize)
} else window.onresize = null
},
screenResize() {
const newNavbarFixed = !(document.body.clientWidth > 900)
console.log('screenResize', document.body.clientWidth, newNavbarFixed)
if (this.navbarFixed !== newNavbarFixed) this.navbarFixed = newNavbarFixed
},
changeActions(val) {
this.actionsStr = val.join('')
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
position: relative;
.controls {
position: absolute;
width: 500px;
line-height: 1.3;
background-color: rgba($color: #fff, $alpha: 0.5);
padding: 20px;
top: 0;
right: 0;
}
}
</style>

lui - imageViewer - 图片查看器的更多相关文章

  1. jQuery功能强大的图片查看器插件

    简要教程 viewer是一款功能强大的图片查看器jQuery插件.它可以实现ACDsee等看图软件的部分功能.它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片.该图片查看器还支持移动设备, ...

  2. 如何在pyqt中使用 QGraphicsView 实现图片查看器

    前言 在 PyQt 中可以使用很多方式实现照片查看器,最朴素的做法就是重写 QWidget 的 paintEvent().mouseMoveEvent 等事件,但是如果要在图像上多添加一些形状,那么在 ...

  3. wpf 仿QQ图片查看器

    参考博客 WPF下的仿QQ图片查看器 wpf图片查看器,支持鼠标滚动缩放拖拽 实现效果 主要参考的WPF下的仿QQ图片查看器,原博主只给出了部分代码. 没有完成的部分 1.右下角缩略图是原图不是缩略图 ...

  4. 发布两款JQ小插件(图片查看器 + 分类选择器),开源

    图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer ...

  5. wpf图片查看器,支持鼠标滚动缩放拖拽

    最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class=&qu ...

  6. 用JQ仿造礼德财富网的图片查看器

    现在就职于一家P2P平台,自然也会关注同行其它网站的前端技术,今天要仿造的是礼德内页的一个图片查看器效果.不过说白了,无论人人贷也好礼德财富也好,很多地方的前端都做的不尽如人意,比如忽略细节.缺乏交互 ...

  7. 基于jQuery的一个简单的图片查看器

    项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...

  8. Objective-C ,ios,iphone开发基础:快速实现一个简单的图片查看器

    新建一个single view 工程: 关闭ARC , 在.xib视图文件上拖放一个UIImageView  两个UIButton ,一个UISlider ,布局如图. 并为他们连线, UIImage ...

  9. Window Phone 8 应用程序连接扩展图片中心,图片扩展,图片查看器

    WMAppManifest.xml <?xml version="1.0" encoding="utf-8"?> <Deployment xm ...

  10. js手写图片查看器(图片的缩放、旋转、拖拽)

    在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...

随机推荐

  1. linux服务器连接数查询

    linux服务器环境检查 CPU.内存使用情况 查看系统整体执行情况 命令执行 # 查看当前系统正在执行的进程的相关信息,包括进程ID.内存占用率.CPU占用率等 top # 返回结果 # 14:06 ...

  2. WPF图片的缩放节省内存

    一.前言 正好项目用到要加载大量图片,虽然说可以使用WPF提供的自带的UI虚拟化功能,但是直接加载大量的图片到内存还是会 消耗很多的内存,而且WPF支持UI虚拟化的ListBox等容器的布局是Virt ...

  3. ADE-XL bsub提交超时

    查找命令行log, Fatal server error: could not open default font 'fixed' 解决方案: yum install 'xorg-x11-font*'

  4. react项目--路由封装

    import React, { lazy } from "react"; import Home from "../views/Home"; import Lo ...

  5. [Swift]使用Alamofire传递参数时报错

    p.p1 { margin: 0; font: 11px Menlo; color: rgba(0, 0, 0, 1) } span.s1 { font-variant-ligatures: no-c ...

  6. Win10打开Autodesk软件时提示“管理员已阻止你运行此应用”

    Win10用户的最大困扰就是系统的安全性太高,导致很多软件在运行时总是会报错,这不,又有同学遇到了下面的问题: 当你的电脑跳出这么鲜红的界面你是不是很想砸了它....手下留脑~它还能再奋斗两年. 出现 ...

  7. python打包生成exe报错

    如图所示    如果出现的是这个问题可以可以考虑以下方法 首先卸载原先下载的 Pyinstaller pip uninstall pyinstaller 再执行以下代码,去github上下载 pip ...

  8. 小白之Python-基础中的基础01

    Python-基础中的基础01 第一次写博客笔记,尝试并监督下自己. 每一天都值得期待! 20170803 -----------------华丽的分界线------------- Python之-- ...

  9. 路飞前台全局css 全局配置文件,安装axios,安装vue-cookies,安装elementui,安装bootstrap和jq,后台主页模块表设计,后台主页模块轮播图接口,录入数据,跨域问题详解

    目录 路飞前台全局css 全局配置文件,安装axios,安装vue-cookies,安装elementui,安装bootstrap和jq,后台主页模块表设计,后台主页模块轮播图接口,录入数据,跨域问题 ...

  10. npm查询所有可以安装的包

    npm view 包名 versions