用vue实现点击图片预览浏览器满屏大图

最新推荐文章于 2024-08-06 17:41:12 发布

真·skysys

最新推荐文章于 2024-08-06 17:41:12 发布

阅读量1.0k

点赞数

分类专栏：大前端和跨平台技术文章标签： vue

原文链接：https://www.cnblogs.com/sanhuamao/p/13596753.html

版权

大前端和跨平台技术专栏收录该内容

329 篇文章 105 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

该博客介绍了如何在Vue项目中实现点击图片后，预览大图并填充整个浏览器屏幕的功能，参考了相关博客文章。

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

npm install vue-directive-image-previewer -D

import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer)

使用

  <img v-image-preview src="picture-url"/>

Ref:https://www.cnblogs.com/sanhuamao/p/13596753.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

真·skysys

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

Vue - 实现 PC 图片全屏放大预览（支持多图、切换、缩放、旋转、放大缩小、拖动、图片标题、键盘关闭、缩放比例、循环查看等等）

王佳斌

07-11

3977

本文提供从 0-1 实现图片全屏预览（支持多图）功能的详细步骤，并提供使用示例，另外，支持切换、缩放、旋转、放大缩小等功能，如果您不需要可以关掉。您可以按照自己的需求进行调整配置及样式。Vue项目使用v-viewer插件实现图片预览、切换、缩放、旋转，Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作，vue项目图片预览v-viewer插件使用vue图片查看器插件，vue预览图片 v-viewer，vue 实现图片的放大缩小(以鼠标位置为中心放大缩小)以及拖拽功能，vue iview多张图片

vue使用vue-photo-preview全屏查看图片

12-07

2077

安装插件： npm install vue-photo-preview --save 引入到项目中：全局引入：在main.js中引入： // 图片预览插件 vue-photo-preview import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(preview) 使...

参与评论您还未登录，请先登录后发表或查看评论

vue项目图片预览组件

热门推荐

Hug_rj的博客

04-28

10万+

中国(寿光)国际蔬菜科技博览会智慧农业系统 — LED拼接屏展示前端开发文档上线后呈现效果：一、开发需求及方案制定 1、确定现场led拼接屏的宽高比，按照1920px*1080px的分辨率，F11全屏后刚好占满整屏且无滚动条； 2、与产品设计确定页面相关功能：第一屏相关功能：实时时间、当地天气、菜博会基本信息、图表数据统计（近三日人流量、...

数据可视化大屏前端屏幕多分辨率适配方案(vue,echarts)

qq_29252533的博客

12-09

1万+

数据可视化大屏前端屏幕自动适配方案写在前面: 第一次写博客, csdn账号注册很久了, 应该是2010年注册的, 当时我还在上高中, 当时还在写易语言的, 有些问题搞不懂的会来csdn看大佬是怎么解决的, 也写了些没什么用的小工具上传到csdn, 当然现在都在用git了. 很多人好奇, " 你为什么要学易语言, 垃圾语言 " , 当时是实在看不懂英语, 但是对编程(当时的理解就是编程)很有兴趣, 非常想学. 现在回想从 c语言易语言 vb javascript java python , 一路过

vue pc端element-ui的走马灯carousel实现自适应全屏banner

xiaoqiangbigbrother的博客

07-04

1万+

前提摘要：使用vue很方便做一些效果，目前开源的组件特别的多pc端使用轮播图的话element-ui的carousel是一个不错的选择，当然也可以选择swiper组件。问题：我发现carousel组件容器的高度是固定写死的，就算是我把image图片的宽度设置100%，它会随着浏览器屏幕的宽度等比例缩小到我设置的最小宽度就不会再变小。但是因为外面的容器已经写死了一个高度，这样的话就会留有一片空白区域...

基于 cropper.js 实现前端图片裁剪、放大、缩小、移动支持移动端和PC端

07-11

`cropper.js` 是一个强大的 JavaScript 图片裁剪库，它支持在移动端和PC端进行图片的裁剪、放大、缩小和移动操作，极大地提高了用户体验。本教程将详细介绍如何利用 `cropper.js` 来实现这些功能。首先，我们要...

点击图片全屏预览大图效果

06-02

仿QQ空间新版相册点击图片全屏预览大图效果，可以通过在线点击预览大图

vue实现浏览器全屏展示功能

12-13

1、项目中使用的是sreenfull插件，执行命令安装 npm install --save screenfull 2、安装好后，引入项目，用一个按钮进行控制即可，按钮方法如下： toggleFullscreen() { if (!screenfull.enabled) { this.$message({ message: 'you browser can not work', type: 'warning' }) return false } screenfull.toggle() } 试了一下可以全屏，我用的chrome，IE9以下不要考

图片点击可全屏、缩小预览

10-20

图片点击可全屏、缩小预览

vue中实现图片全屏缩放预览

deng_zhihao692817的专栏

09-14

2317

基于photoswipe的vue图片全屏缩放预览插件：vue-photo-preview 说明 1.简化了photoswipe的默认设置 2.取消了图片需设定尺寸的要求 3.默认关闭了分享按钮 4.简化了html结构安装 npm install vue-photo-preview --save main.js引入 import preview from 'vue-photo-p...

vue |实现点击图片预览浏览器满屏大图

weixin_48181168的博客

12-08

830

安装插件 npm install vue-directive-image-previewer -D 在main.js 引入插件 import VueDirectiveImagePreviewer from 'vue-directive-image-previewer' import 'vue-directive-image-previewer/dist/assets/style.css' Vue.use(VueDirectiveImagePreviewer) 使用 ...

vue 图片全屏展示

leng0920的博客

12-01

1850

<template> <div id="hItem1" :style="{ height: screenHeight + 'px'}"> <div class="mainK"> <img :style="{ height: screenHeight + 'px'}" src="@/images/home/item1/banner.png" alt=""> </div> </d.

html实现点击图片全屏显示,用vue实现点击图片预览浏览器满屏大图

weixin_42530172的博客

06-10

2076

前提安装插件npm install vue-directive-image-previewer -D引入插件import VueDirectiveImagePreviewer from ‘vue-directive-image-previewer‘import ‘vue-directive-image-previewer/dist/assets/style.css‘Vue.use(VueDirec...

vue实现全屏功能

R_RA222的博客

07-08

535

vue实现全屏功能方法如下。。。 toggle() { let element = document.documentElement; if (this.fullscreen) { if (document.exitFullscreen) { document.exitFullscreen } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(

Vue实现图片压缩预览与上传

在Vue.js应用程序中，实现图片压缩预览并上传功能是一个常见的需求，尤其在用户需要上传个人头像或者产品图片时。以下是一个详细的步骤解析：首先，我们需要在模板中设置一个`<input type="file">`元素，让用户...