vue点击图片查看大图 图片查看大图 查看大图插件 vue-photo-preview

最新推荐文章于 2024-05-17 04:12:55 发布
最新推荐文章于 2024-05-17 04:12:55 发布
阅读量2.8k 收藏
点赞数 4
分类专栏： vue

转载（blog.csdn.net/qq_27721169/article/details/82735013）vue点击图片查看大图使用插件 vue-photo-preview

转载（blog.csdn.net/qq_27721169/article/details/82735013）

 版权声明： https://blog.csdn.net/qq_27721169/article/details/82735013

1、

npm install vue-photo-preview --save

2、

 

  1. import preview from 'vue-photo-preview'

  2. import 'vue-photo-preview/dist/skin.css'

  3. import Vue from 'vue'

  4. Vue.use(preview)

3、

 

  1. # html

  2. //在img标签添加preview属性 preview值相同即表示为同一组

  3. <img src="xxx.jpg" preview="0" preview-text="描述文字">

  4. //分组

  5. <img src="xxx.jpg" preview="1" preview-text="描述文字">

  6. <img src="xxx.jpg" preview="1" preview-text="描述文字">

  7. <img src="xxx.jpg" preview="2" preview-text="描述文字">

  8. <img src="xxx.jpg" preview="2" preview-text="描述文字">

4、加载数据后刷新 d

this.$previewRefresh()
fj_ut
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通过vue-amap插件以手动输入和鼠标点击的方式动态添加单个多边形到地图中
郭宝的博客
10-12 1678
核心代码： <template> <div> ============================14、高德地图--创建多边形的使用案例============================ <el-form :inline="true" :model="form" class="demo-form-inline"> &...
解决vue-photo-preview 异步图片放大失效的问题
10-15
在Vue.js开发过程中，我们经常需要使用图片预览功能，而`vue-photo-preview`是一个常用的图片预览插件。然而，当处理异步加载的图片时，可能会遇到图片放大失效的问题。本文将详细探讨这个问题，并提供解决方案。 ...
vue3图片预览插件.zip
06-14
vue3 发布之后，开始使用 vue3 + ts 写代码，需要使用图片预览插件，在 npm 找了一圈没有适合的。要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。 内附使用说明 纯手打，放心使用。 实现方式参考了 vant 部分源码，纯手写并未使用任何三方插件，可放心使用。本来只是一个简单的 pc 端图片预览插件，但是考虑到有些小伙伴可能需要兼容移动端，故特意做了兼容
vue v-html新增点击图片放大预览功能组件
lihefei_coder的博客
04-15 1163
封装组件 PicturePreview <template> <div v-if="visible" class="preview-container" @click.stop="previewClick($event)"> <span class="preview-close" @click.stop="closeClick"></span> <img class="preview-img" :src="src"
Web前端最全带你使用vue为女朋友编写一个旋转相册_vue 3d 相册，2024年最新前端面向对象
最新发布
2401_84619986的博客
05-17 238
题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心。
vue图片点击预览
weixin_43909743的博客
08-09 3800
前言 起因：关于聊天框图片点击查看的实现，不如记下，以后好复用 手写实现 在父组件引入并且传值 // 父组件 <preview :previewImg="companyPreview"></preview> // 引入 import preview from "./preview.vue" // components中注册 components:{preview}, // 传递的参数 companyPreview:{ imgList: [], // 所有图片数组 in
vue 项目引入 v-viewer ，图片点击预览以及移动等功能
weixin_42197834的博客
05-22 2039
1.相关的demo官网上可以看到， 这里附上地址：https://mirari.cc/v-viewer/ 正文： 先下载依赖： npm install v-viewer --save 在全局进行配置， main.js里面 import Vue from 'vue'; import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ ...
vue-photo-preview:基于photoswipe的vue图片预览组件
04-13
"基于photoswipe的vue图片预览插件" 说明 1.简化了photoswipe的默认设置 2.取消了图片需设定尺寸的要求 3.默认关闭了分享按钮 4.简化了html结构 使用 # 安装 npm install vue-photo-preview --save # 引入 import ...
vue-photo-preview.zip
05-27
在给定的压缩包“vue-photo-preview.zip”中，包含的是一个基于Vue.js实现的图片预览插件——vue-photo-preview。这个插件主要用于在移动端和PC端提供一个便捷的图片点击放大功能，并且支持全屏展示以及左右滑动切换...
vue-preview动态获取图片宽高并增加旋转功能的实现
10-15
vue-preview是一个流行的图片查看器组件，适用于网页应用，它提供了多种功能，如全屏、放大、分享和图片切换。在某些场景下，我们需要进一步增强其功能，例如动态获取图片的实际尺寸和添加旋转功能。 首先，让我们...
vue预览图片 v-viewer
weixin_44955769的博客
08-18 883
效果 1、安装依赖 npm install v-viewer --save 2、全局引入 import Vue from 'vue'; import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar'
vue查看图片插件专门给pc电脑端用的查看图片插件
08-12
vue查看图片插件，专门给pc电脑端用的查看图片插件 Vue view picture plugin, dedicated to view the picture plugin for pc computer
vue组件js图片查看点击预览大图并下载高清大图到本地
08-12
vue 2.5.2 版本 vue组件 实现点击预览大图功能，点击下载图片功能（不兼容IE，适用于PC端） 内部代码可实现点击图片旋转效果，在本处无用，故注释掉，如有需要可打开调整.
点击图片全屏预览大图效果
06-02
仿QQ空间新版相册点击图片全屏预览大图效果，可以通过在线点击预览大图
Vue中查看图像的组件
qq_49017797的博客
08-11 714
v-viewer是基于viewer.js的插件，用于Vue中进行图像查看的组件（可以进行单张、多张图片查看）全局引入使用：在main.js文件中引入。
vue图片查看器，支持放大 缩小 还原
-
10-29 2503
Vue中使用图片查看器如何使用 项目中使用的是 vue + element-ui 要求查看图片时能够实现 图片放大缩小翻转等功能，于是找到一个适合的插件，首先看下效果: 功能与我们设想的一样，下面看下如何使用 GitHub地址：viewerjs 官网：https://fengyuanchen.github.io/viewerjs/ 如何使用 1、首先安装v-viewer npm i v-viewer --save 如果安装不上 使用cnpm安装 2、然后main.js中引入 v-viewer impo
Vue实现点击图片放大功能、element-ui自带隐藏的图片查看器el-image-viewer放大预览图片
热门推荐
林中明月间丶
04-09 1万+
https://blog.csdn.net/qq348843576/article/details/103261567 https://blog.csdn.net/qq_36320160/article/details/102175334 父组件: <template> <div> <!-- imgBaseUrl为图片URL--> <!-- <img v-if="imgBaseUrl" style="width:100%" :src="imgBas
（vue+element）PC端图片打点
weixin_44056717的博客
09-18 1489
这是小弟写的第二篇博客，废话不多说 效果图 第一步： 左边的列表是用element组件 这样能实现element的滚动条和点击选择，不是很清楚的可以先去了解一下官网的组件。 第二步 点击列表获取当前数据，勾选后禁用再勾选 把获取的对象放到另一个数组里，这个数据就是地图打点的显示的数组 第三步 在右边图片进行操作，点击图片获取top和left赋值到刚刚的对象中，在push到数组里，然后把isCheck也丢进去，实现打点完成以后，禁用打点。 我自己定义了一个全局变量noPosition，是为了防止点击
vue图片查看（放大、缩小、旋转）
fggdgh的博客
03-05 2211
v-viewer介绍 基于viewer.js用于图片浏览的Vue组件，支持旋转、缩放、翻转等操作。官方文档地址 示例： <template> <div> <img v-for="{src, id} in images" :key="id" :src="src" @click="show(id)"> </div> </template> <script> import 'viewerjs/dist/viewer.css
vue--点击图片放大弹窗的自定义指令（低级版）
05-26
好的，下面是一个简单的点击图片放大弹窗的自定义指令： ```javascript // 引入 Vue import Vue from 'vue' // 定义指令 Vue.directive('enlarge', { bind: function (el) { // 给图片元素绑定点击事件 el.addEventListener('click', function () { // 创建弹窗元素 const dialog = document.createElement('div') dialog.style.position = 'fixed' dialog.style.top = '0' dialog.style.left = '0' dialog.style.width = '100%' dialog.style.height = '100%' dialog.style.backgroundColor = 'rgba(0, 0, 0, 0.5)' dialog.style.display = 'flex' dialog.style.justifyContent = 'center' dialog.style.alignItems = 'center' dialog.style.zIndex = '9999' // 创建弹窗中的图片元素 const img = document.createElement('img') img.src = el.src img.style.maxWidth = '90%' img.style.maxHeight = '90%' img.style.borderRadius = '5px' img.style.boxShadow = '0px 0px 5px #666' // 将图片元素添加到弹窗中 dialog.appendChild(img) // 将弹窗添加到body中 document.body.appendChild(dialog) // 点击弹窗以外的区域关闭弹窗 dialog.addEventListener('click', function (e) { if (e.target === dialog) { document.body.removeChild(dialog) } }) }) } }) ``` 使用方法：在需要放大的图片元素上添加 v-enlarge 指令即可。 ```html <template> <div> <img src="图片地址" v-enlarge> </div> </template> ``` 请注意，这只是一个简单的实现方式，可能存在一些问题，如图片过大时会出现滚动条等。如果需要更完善的功能，可以参考一些开源的图片查看组件，如vue-image-viewer、vue-photo-preview等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值