首页 > 其他分享 >Vue使用v-viewer插件实现图片预览和缩放和旋转等功能

Vue使用v-viewer插件实现图片预览和缩放和旋转等功能

时间:2023-07-25 15:12:18浏览次数:68  
标签:插件 Vue 预览 缩放 viewer 日志 图片

科普:v-viewer

简单来说:v-viewer是一款支持vue项目中的图片浏览组件,它支持图片旋转、缩放、翻转等操作,支持配置化.非常强大

官网目录:v-viewer

安装依赖

直接执行命令:

npm install v-viewer --save

引入并使用依赖

下载完成之后,就可以配置了,具体操作就是引入并使用依赖了。

找到vue项目中的main.js 文件并加入如下代码:

// 引入Viewer插件
import VueViewer, { directive as viewerDirective } from 'v-viewer';
// 引入Viewer插件的图片预览器的样式
import 'viewerjs/dist/viewer.css'; 
// 使用Viewer图片预览器
Vue.use(VueViewer)
// 用于图片预览的指令方式调用 在元素上加上会处理元素下所有的图片,为图片添加点击事件,点击即可预览
Vue.directive('viewer', viewerDirective({debug: true
}));

页面代码使用

所有前提工作都做完之后,我们就来到了重点,让图片可以进行预览,旋转,放大缩小等

其实用了这个插件之后特别简单,只需要给图片这个容器一个指令,就可以拥有这些功能。

v-viewer

消除日志打印

好归好,但是有一个问题,就是控制台打印太多了:

这么多日志肯定是不利于开发的,所以我想着把插件相关的日志给去掉

想要解决这个问题,只能是修改源码喽,一般情况下,尽量还是不要碰源码,但是这种情况,是肯定得碰的啦

打开项目的node_modules目录,往下翻,找到v-viewer这个文件夹的dist文件夹下的v-viewer.js文件

这个就是这个插件的js代码,作者在里面为了方便调试打印了一些日志,我们需要手动关闭:

标签:插件,Vue,预览,缩放,viewer,日志,图片
From: https://www.cnblogs.com/hs20011205/p/17579899.html

相关文章

  • vue2-ace-editor基础配置
    简介Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime、Vim和TextMate等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和JavaScript应用程序中。Ace被维护为Cloud9IDE的主要编辑器,并且是MozillaSkywriter(Bespin)项目的继承者。快速开始......
  • 2023-07-25 html中引入vue,报错:Vue is not a constructor ==》引用的vue版本不兼容导致
    报错代码:我使用的vue外链https://cdn.jsdelivr.net/npm/vue,该外链引用的是最新的[email protected]版本,而我的vue写法为vue2.0版本的写法,故而不兼容。解决方案:引用指定版本的vue......
  • Vue学习笔记: provide与inject
    在前几篇学习笔记里,接触到了props$eimt$parent$root等方式实现父子组件间的数据传递方式,但是如果遇到层级很多的情况如何处理呢?provide和inject可以帮助我们解决这一问题。 一个父组件相对于其所有的后代组件,会作为依赖提供者。任何后代的组件树,无论层级有多深,都可以注入......
  • Vue2语法知识总结
    下面总结Vue2的语法知识1、插值语法<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>Vue插值语法</title> <scripttype="text/javascript"src="../javascriptdemo/vue.js"></script> &......
  • vue组件中引入自定义js文件
    在组件的script标签内直接引入:importmyFunctionfrom'@/util/custom.js'; 开始使用自定义js中的方法:exportdefault{//...otherVuecomponentoptionsmethods:{someMethod(){//Callthecustomfunctionfromyourcustom.jsmyFunctio......
  • 从vue2到vue3,自定义组件的v-model实现原理
    前言相信使用vue开发的同学应该都体会过v-model的便利,它可以非常方便地进行双向数据绑定,只要重新输入内容,视图就会立刻发生改变。本文将着重介绍如何在自定义组件当中使用v-model,以及在vue2和vue3中使用方式上的差异。概述v-model是一个语法糖,它在组件使用时相当于如下简写://......
  • 自定义gradle插件并且发布到本地仓库
    转载请标明出处,维权必究:http://77blogs.com/?p=189一、在工程上新建一个Module。二、删除其余不必要的文件,最终目录结构如下:注意:由于我用的是kotlin语言,所以用的是java目录,java语言也是用java目录,如果用的是groovy语言,那么就用groovy目录。src/main/resources/META-INF/gra......
  • vue 笔记暂存
    目录1:什么是Vue.js2:MVC和MVVM。3:为什么要学习前段框架4:框架和库的区别5:怎么使用Vue。6:常见的Vue指令7: 五大事件修饰符8:在vue中使用class样式9:使用内联样式 10:v-for指令11:v-if和v-show指令 小技巧:注意:总结:1:什么是Vue.js1.1:Vue.js 是目前最火的一个前端框架......
  • solr中如何定义自己的解析器插件(QParserPlugin)
    /*****************************************************/>solr中如何定义自己的解析器插件/*****************************************************/0.为什么要自定义自己的解析器插件/*****************************************************///因为solr默认的Lucen......
  • Vue WebSocket的实现 含断线重连
    vue客户端 main.jsimport{createApp}from'vue'import{reactive}from'vue'importAppfrom'./App.vue'import{webSocketUrl}from'/public/static/config.json'letwebsock=null;constapp=createApp(App);......