一、安装依赖
npm install v-viewer --save
二、在main.js文件引入
import Vue from 'vue'
//v-viewer轮播图实现效果:
// 轮播图+缩放、旋转照片
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})
三、使用
1、以指令形式引入,将v-viewer指令添加到元素即可
<span>医生签名:
<el-image style="width: 50px; height: 50px"
v-for="url in doctorSignaturePhoto"
:key="url" :src="url"
v-viewer lazy>
</el-image>
</span>
2、以组件形式引入
<viewer :images="images">
<img v-for="src in doctorSignaturePhoto" :src="src" :key="src"/>
</template>
</viewer>
四、这里引用两张https://element.eleme.cn/#/zh-CN/component/image里的两张图片并使用了相关知识。
export default {
data() {
return {
doctorSignaturePhoto: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
]
}
}
}