文章目录

一、页面效果二、使用步骤1.npm安装2.main.js文件中全局引入v-viewer插件3.完整代码

一、页面效果

更多内容和效果在官网地址查看，官网地址：v-viewer

二、使用步骤

1.npm安装

<code>npm install v-viewer@1.6.4

2.main.js文件中全局引入v-viewer插件

代码如下：

import Viewer from 'v-viewer'

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' }

})

3.完整代码

我这里写了常用的三种使用方式，页面效果我只是简单的布局，不要在意这个小细节，下面是代码：

<template>

<div>

<!-- 第一种方式-->

<div style="width: 100%;height: 300px;margin-top:100px;display:flex;justify-content: center">code>

<viewer :images="photo">code>

<img

v-for="(src, index) in photo"code>

:src="src"code>

:key="index"code>

style="width: 200px;height: 300px;margin-left: 10px"code>

/>

</viewer>

</div>

<!-- 第二种方式-->

<img

src="https://inews.gtimg.com/om_bt/OtJhl6_zArzI6BSdVjGLfKGObnrm36gW47dFuaxSOmT7YAA/1000"code>

style="width: 300px;height: 200px;margin: 100px auto;display: block"code>

v-viewer alt=""code>

/>

<!-- 第三种方式-->

<button style="margin: 100px auto;display: block" type="button" class="button" @click="previewURL">点击展示图片</button>code>

</div>

</template>

<script>

export default { -- -->

name: "test",

data(){

return{

photo:[

'https://wxls-cms.oss-cn-hangzhou.aliyuncs.com/online/2024-04-18/218da022-f4bf-456a-99af-5cb8e157f7b8.jpg',

'https://inews.gtimg.com/om_bt/O6SG7dHjdG0kWNyWz6WPo2_3v6A6eAC9ThTazwlKPO1qMAA/641'

]

}

},

methods:{

previewURL(){

const $viewer = this.$viewerApi({

images: this.photo

})

},

}

}

</script>

<style scoped>

</style>