没有闯不过的关口，没有打不倒的敌人
前言
夜深了，楼下的超市明晃晃的，点了一杯奶茶，香飘飘的~
1 介绍
常用配置项
options: {
inline: true,
// 遮罩层
backdrop: false,
// 全屏按钮
button: false,
// 缩略图
navbar: false,
// 标题
title: false,
// 操作按钮
toolbar: false,
// 缩放比例提示
tooltip: false,
// 默认查看第2张
initialViewIndex: 2,
// 是否可以拖拽
movable: true,
// 渲染完成回调
viewed(evt) {
// 所有方法均可调用
console.log('viewed', evt)
}
}
常用属性
index
// 当前索引
viewer.index
options
// 配置项
viewer.options
常用方法
view
// 查看第几张
viewer.view(index)
prev
// 上一页
viewer.prev()
next
// 下一页
viewer.next()
rotate
// 旋转
viewer.rotate(degree)
zoom
// 缩放
viewer.zoom(ratio)
常用事件
ready
options: {
ready(evt) {
// 构造完成，可以拿到实例
console.log('ready', evt)
}
}
moved
options: {
moved(evt) {
// 移动结束，可以拿到索引
console.log('moved', evt)
}
}
viewd
options: {
moved(evt) {
// 渲染完成，所有方法均可调用
console.log('viewd', evt)
}
}
2 使用
安装
npm install v-viewer --save
操作照片
<template>
<div id="app">
<viewer
:options="options"
:images="images"
@inited="inited"
class="viewer"
ref="viewer"
>
<template scope="scope">
<img v-show="false" v-for="src in scope.images" :src="src" :key="src" />
{{ scope.options }}
</template>
</viewer>
<button type="button" @click="show">Show</button>
</div>
</template>
<script>
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer/src/component.vue'
export default {
components: {
Viewer
},
data() {
return {
options: {
inline: true,
// 遮罩层
backdrop: false,
// 全屏按钮
button: false,
// 缩略图
navbar: false,
// 标题
title: false,
// 操作按钮
toolbar: false,
// 缩放比例提示
tooltip: false,
// 默认查看第2张
initialViewIndex: 2,
// 是否可以拖拽
movable: true,
viewed(evt) {
// 渲染完成，所有方法均可调用
console.log('viewed', evt)
}
},
images: [
'https://picsum.photos/id/50/346/216',
'https://picsum.photos/id/51/346/216',
'https://picsum.photos/id/52/346/216'
]
}
},
methods: {
inited(viewer) {
// 初始化，可获取 viewer
console.log('inited', viewer)
this.$viewer = viewer
},
show() {
this.$viewer.show()
}
}
}
</script>
3.注意
1.使用inline模式，构建图片操作
2.使用配置项去除不必要的元素
3.在options里面配置事件
4.viewed事件回调，能操作所有方法
尾声
如果生活艰难的话，盖好被子，躲进甜甜的梦里
晚安 ^_^
