import Vue from ‘Vue’
import Viewer from ‘v-viewer’
import ‘viewerjs/dist/viewer.css’
Vue.use(Viewer)
Viewer.setDefaults({
Options: {
'inline': true, // 是否启用inline模式
'button': true, // 是否显示右上角关闭按钮
'navbar': true, // 是否显示缩略图底部导航栏
'title': true, // 是否显示当前图片标题,默认显示alt属性内容和尺寸
'toolbar': true, // 是否显示工具栏
'tooltip': true, // 放大或缩小图片时,是否显示缩放百分比,默认true
'fullscreen': true, // 播放时是否全屏,默认true
'loading': true, // 加载图片时是否显示loading图标,默认true
'loop': true, // 是否可以循环查看图片,默认true
'movable': true, // 是否可以拖得图片,默认true
'zoomable': true, // 是否可以缩放图片,默认true
'rotatable': true, // 是否可以旋转图片,默认true
'scalable': true, // 是否可以翻转图片,默认true
'toggleOnDblclick': true, // 放大或缩小图片时,是否可以双击还原,默认true
'transition': true, // 使用 CSS3 过度,默认true
'keyboard': true, // 是否支持键盘,默认true
'zoomRatio': 0.1, // 鼠标滚动时的缩放比例,默认0.1
'minZoomRatio': 0.01, // 最小缩放比例,默认0.01
'maxZoomRatio': 100, // 最大缩放比例,默认100
'url': 'data-source' // 设置大图片的 url
}
})
alt l里面写图片名称
https://codepen.io/mirari/pen/PowNyEY 在线演示
html
<link href="//unpkg.com/viewerjs/dist/viewer.css" rel="stylesheet">
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/viewerjs/dist/viewer.js"></script>
<script src="//unpkg.com/v-viewer/dist/v-viewer.js"></script>
<div id="app">
<viewer :images="images" class="images clearfix">
<template slot-scope="scope">
<img v-for="a in scope.images"
:src="a.src" :key="a.src" class="image" :alt="a.alt">
</template>
</viewer>
</div>
css,js
.image {
height: 200px;
cursor: pointer;
margin: 5px;
display: inline-block;
}
.viewer-title{
font-size:30px!important;
}
Vue.use(VueViewer.default)
console.log(VueViewer.default)
var Main = {
methods: {
toggle() {
}
},
data() {
return {
images: [
{src: 'https://picsum.photos/200/200', alt: 'aa.jpg p1-3' , age: 15},
{src: 'https://picsum.photos/300/200', alt: 'bb.jpg p2-3' , age: 16},
{src: 'https://picsum.photos/250/200', alt: 'cc.jpg p3-3' , age: 17},
]
}
}
}
var App = Vue.extend(Main)
new App().$mount('#app')