v-viewer指令操作

最新推荐文章于 2023-12-26 14:27:12 发布
最新推荐文章于 2023-12-26 14:27:12 发布
阅读量313 收藏
点赞数
文章标签： vue 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46131497/article/details/129995628
版权

可直接将v-viewer 这个指令放在盒子标签上即可，如果想要设置相关的参数，可以像如图添加

v-viewer="{movable: false}"

如果默认所有参数，直接写v-viewer就行，因为这个插件是可以解决安卓和ios放大图片模糊的问题。

根据功能需求，是放在轮播图上的

虽然在点击放大图片后，会show这个错误，但是不影响功能的使用，所有暂时没有解决

 

苍风的心上人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用v-viewer实现图片的放大缩小以及旋转
不知在知的博客
04-15 1480
使用v-viewer实现图片的放大缩小以及旋转 话不多说，先看效果图 首先要安装v-viewer插件 npm install v-viewer 安装之后在需要引入插件的页面进行局部引入 因为我的项目都是组件引入，所以在这里也使用组件引入的方式 import 'viewerjs/dist/viewer.css'; import Viewer from "v-viewer/src/component...
vue 使用 v-viewer 用于图片浏览的Vue组件，支持旋转、缩放、翻转等操作，基于viewer.js。
最新发布
努力
01-29 1276
vue 中 v-viewer 的简单使用
v-viewer的使用
laoyaoshilaoyao的博客
04-28 4200
v-viewer是一个图片放大预览，他可以鼠标滚轮放大和缩小，也可以全屏，上一张下一章 首先先安装 npm install v-viewer --save main.js引入 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) 如果你不想显示按钮和图片名称的话，你可以在main.js Vue.use(Viewer, { defaultOptions: { button: f
【vue】v-viewer图片查看器的使用和通过函数直接打开图片预览
飘逸者打瞌睡
04-23 924
直接通过函数打开图片，不用通过用户点击。引入v-viewer依赖包。
前端插件v-viewer图像插件
greencaiji的博客
12-26 2456
简介：一款基于 viewer.js 封装的Vue版插件，可用于图像查看，以及图片的旋转、缩放等功能预览。插件的安装：该插件使用方式有：指令形式、组件形式（以下介绍组件形式）
v-viewer:vue的图片查看器组件，支持旋转、缩放、缩放等，基于viewer.js
07-24
视频浏览器 vue的图片查看器组件，支持旋转、缩放、缩放等，基于 例子 ...要使用v-viewer ，只需导入它和css文件，然后调用Vue.use()进行安装。 <!-- directive --> <!-- comp
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
10-16
主要介绍了Vue图片浏览组件v-viewer用法,结合实例形式分析了v-viewer的基本功能与使用方法,包括旋转、缩放、翻转等操作技巧,需要的朋友可以参考下
8-13das-viewer_win64_v1.1.8.exe
07-14
das-viewer_win64
react-file-viewer
05-02
有一个主要的React组件FileViewer ，它具有以下道具： fileType字符串：要显示的资源类型（一种受支持的文件格式，例如'png' ）。 传递不支持的文件类型将导致显示unsupported file type消息（或自定义组件）。 ...
vue图片预览放大缩小插件v-viewer用法
blueSkyBoy2850的博客
06-11 1181
1、先安装依赖 npm install v-viewer --save 2、vue项目中引用（在main.js中或要使用的页面导入） import Vue from 'vue' import Viewer from'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) 3、直接在页面中当标签使用这个组件 （1）单个使用 <viewer :images="listSalesImg" :options="OptionssalseImg"
使用v-viewer实现图片查看
tys87198312的博客
02-19 2977
一、环境 vue + springboot + v-viewer v-viewer中文文档 二、开始 1、使用npm命令安装 npm install v-viewer 2、引入v-viewer及必需的css样式，并使用Vue.use()注册插件，之后即可使用。 import 'viewerjs/dist/viewer.css' import Viewer from 'v-viewer' // 预览...
Vue 中使用图片查看器 v-viewer
傲凝的博客
10-15 2万+
插件简介 基于 viewer.js 插件，用于 Vue 的图像查看器组件 官网地址：https://mirari.cc/v-viewer/ 下载安装 通过 npm 安装： npm install v-viewer GitHub 下载地址：https://github.com/mirari/v-viewer UMD 用法 Browser： <link h...
vue中v-viewer图片查看器的应用
tdl2793958525的博客
02-01 1153
在开发中我们会经常用到查看图片、放大、缩小、旋转等操作这个时候就可以用到v-viewer，这一是一款很好用的插件 1、安装依赖 npm install v-viewer --save 2、在main.js中引入注册 import Viewer from 'v-viewer'; import 'viewerjs/dist/viewer.css'; Vue.use(Viewer); Vi...
Vue实现图片大图预览，v-viewer组件的使用方法演示
小蓝枣的博客
01-10 1462
先看下效果图： 点击图片就会进入预览，还包括图片名和原图大小、工具栏等。 首先需要安装 v-viewer npm install v-viewer 然后在 main.js 中进行导入。 实例使用中，只需要用 viewer 包住图片即可。 如果想隐藏工具栏或图片名称等。 直接在引用时设置下默认配置。 下面 4 个配置分别是标题、工具栏、导航栏、关闭按钮，可以选择性隐藏。 都关闭后的效果图
iview框架获取Table点击的第几个内容
weixin_41033048的博客
12-20 594
columns: [ { title: "登录账号", key: "account" }, { title: "姓名", key: "name" }, { title: "手机", key...
vue照片查看器插件v-viewer
luwenze的博客
12-03 1万+
1.首先安装依赖包 npm install v-viewer --save 2.在main.js中配置 //引入图片查看器 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer, { defaultOptions: { zIndex: 9999 } }) 3.在vue文件中...
Viewer.js的使用
热门推荐
神奇的酱油的博客
09-29 10万+
viewer.js GitHub地址：https://github.com/fengyuanchen/viewerjs https://github.com/fengyuanchen/viewer 两个版本的使用方式不完全相同； 尽管作者已经将使用方法都列出了（https://github.com/fengyuanchen/viewerjs#table-of-contents），但还是记录一...
vue v-viewer库 显示出图片名称
射手男很懒的博客
04-08 1933
已安装viewer往下看，未安装请走https://blog.csdn.net/qq_36247432/article/details/89098038 先看原代码 <viewer :images="images"> <img v-for="src in images" v-lazy="src" :key="src" width="280" height="180...
vue3使用v-viewer
09-20
接下来，你可以在需要使用图片查看标注功能的组件中使用v-viewer指令： ``` <img v-viewer src="path/to/image.jpg" alt="Image"> export default { // 组件的其他配置 } /* 组件的样式 */ ``` 以上...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值