vue使用v-viewer预览、旋转图片。。。

学习的态度

于 2019-11-15 17:24:21 发布

阅读量530

点赞数

分类专栏： vue 文章标签： vue viewer

本文链接：https://blog.youkuaiyun.com/weixin_42772271/article/details/103088822

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在Vue项目中安装并配置v-viewer插件，实现图片预览功能。通过npm安装v-viewer并将其引入到main.js文件中，设置自定义选项如缩放、全屏等，最后在组件中使用thumb和full属性绑定图片链接即可实现单张或多张图片的预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在项目里安装v-viewer

  npm install v-viewer --save

在项目的main.js里面引用包括css

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
//具体需求设置可访问viewer官网查看：http://fengyuanchen.github.io/viewer/ 
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,
    title: false, // 显示当前图片的标题
    tooltip: false, // 显示缩放百分比
    navbar: false, // 底部缩略图
    movable: false, // 图片是否可移动
    scalable: false, // 图片是否可翻转
    fullscreen: false, // 播放时是否全屏
    toolbar: true, //底部工具栏
    loop: false,
    loading: false
  }
})
 
```在vue页面中使用    thumb要显示的小图的链接，full要显示的大图的链接

//单图片时
  <viewer :thumb="imgUrl" 
                  :full="imgUrl">
          <img :src="imgUrl" :key="imgUrl"  style="width: 80px;height: 50px;margin-top:3px;">
   </viewer>
   //多图片
    <viewer :images="images“>
          <img :v-for=” img in images“ src="img" :key="img"  style="width: 80px;height:50px;margin-top:3px;">
   </viewer>
data() {
      return {
        images:[
           '图片地址',
            '图片地址'
        ]
      }
}