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 - 图片查看器的相关教程结束。
