v-viewer图片预览插件，可以放大需要预览的图片

最新推荐文章于 2025-04-23 07:13:46 发布

临渊~羡鱼

最新推荐文章于 2025-04-23 07:13:46 发布

阅读量1.6k

点赞数 30

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/admire_fish/article/details/141092766

版权

文章目录

一、页面效果
二、使用步骤

一、页面效果

在这里插入图片描述

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

二、使用步骤

1.npm安装

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">
      <viewer :images="photo">
        <img
            v-for="(src, index) in photo"
            :src="src"
            :key="index"
            style="width: 200px;height: 300px;margin-left: 10px"
        />
      </viewer>
    </div>
<!--    第二种方式-->
    <img
        src="https://inews.gtimg.com/om_bt/OtJhl6_zArzI6BSdVjGLfKGObnrm36gW47dFuaxSOmT7YAA/1000"
        style="width: 300px;height: 200px;margin: 100px auto;display: block"
        v-viewer alt=""
    />
<!--    第三种方式-->
    <button style="margin: 100px auto;display: block" type="button" class="button" @click="previewURL">点击展示图片</button>
  </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>