v-viewer图片组件在vue项目使用方法

最新推荐文章于 2024-09-02 09:49:51 发布

Alone深秋

最新推荐文章于 2024-09-02 09:49:51 发布

阅读量905

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_44585369/article/details/114263694

版权

本文介绍了如何在Vue项目中使用v-viewer图片组件，包括安装依赖、全局引用配置以及在组件中具体应用的方法，该组件提供图片放大、旋转、翻转等丰富功能。

摘要由CSDN通过智能技术生成

v-viewer可随意放大及缩小图片，另外还有旋转、翻转等功能，是一款不错的前端图片显示插件

第一步：安装依赖

npm install v-viewer --save

第二步：在main.js引用并配置

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer);
Viewer.setDefaults({
   
  defaultOptions: {
   
    zIndex: 9999
  },
  Options: {
   
    'inline': true,//启用内敛模式
    'button': true,
    'navbar': true,//显示缩略图
    'title': true,//显示标题
    'toolbar'