vue基于viewer实现的图片查看器功能
(编辑：jimmy 日期: 2024/11/18 浏览：2)
vue2-viewer
vue2-viewer 是一款强大的图像浏览插件，可以实现图像的放大预览，旋转，任意比例放大和缩小等功能
vue2-viewer 是viewer.js vue的实现，效果以及样式完全移植自viewer.js关于viewer.js可以参考链接
[http://fengyuanchen.github.io...]
插件中所有的效果均大量地使用了css3的新特性替换了viewer.js中的js动画，所以vue2-viewer主要实用场景是现代浏览器中。
使用文档
安装
npm install --save vue2-viewer
在main.js中引入并使用插件
import ImageViewer from 'vue2-viewer'; Vue.use(ImageViewer);
插件会在全局注册vue-viewer组件
使用组件
vue2-viewer 提供两种使用模式，单图片模式和多图列表模式。
单图片模式
props
参数
说明
类型
必须
thumb
要显示的小图的链接
string
true
full
点击放大后的大图链接
string
true
示例：
<vue-viewer style="display: inline-block"
:thumb="image"
:full="image">
</vue-viewer>
<script>
export default {
name: 'app',
data () {
return {
msg: 'vue2-viewer-test',
image: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3427452369,2586833644&fm=173&app=25&f=JPEG"text-align: center"> 
多图片模式
props
参数
说明
类型
必须
thumb
要显示的小图列表的链接数组
array
true
full
点击放大后的大图的链接数组
array
true
list-ul-class
默认小图的列表外层ul的自定义class 用于自定义列表的样式，包括ul内部的slot的内容的样式都可以通过这个方式自定义
string
false
Scoped Slot
name
说明
~
列表中的每一个元素中除了默认图以外的内容
示例：
<vue-viewer multiple
:thumb="imageList"
list-ul-class="image-list"
:full="imageList">
<!--在列表中加入右上角删除按钮-->
<template slot-scope="target">
<span class="icon-remove" @click.stop="onRemove(target.index)" style="">×</span>
</template>
</vue-viewer>
<script>
export default {
name: 'app',
data () {
return {
msg: 'vue2-viewer-test',
imageList: [
'https://timgsa.baidu.com/timg"text-align: center">
总结
以上所述是小编给大家介绍的vue基于viewer实现的图片查看器功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！