vue-picture-preview 插件的使用

最新推荐文章于 2024-08-20 08:56:09 发布
最新推荐文章于 2024-08-20 08:56:09 发布
阅读量1.7w 收藏
点赞数
分类专栏： vue 技术整理 文章标签： vue 图片预览
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuenandehutu/article/details/110549733
版权

  1. 安装依赖：

    npm install vue-picture-preview --save

  2. .vue文件中引用：

    import vuePicturePreview from ‘vue-picture-preview’
    Vue.use(vuePicturePreview)

  3. .html文件中router-view标签后引入:

  4. .vue文件中应用：

    说明：v-preview：存放预览后大图的路径；preview-title-enable：启动预览标题，默认为true；preview-nav-enable;启动预览导航

-----该插件只支持图片预览，不支持缩放功能-----

@本宫微胖@
关注
专栏目录
Vue实现文件预览，支持word excel pdf ppt image txt mp4等格式
10-14
Vue 实现前端文件预览，支持word excel pdf ppt image txt json mp4 等格式，集成到Vue项目中，已组件的方式引入即可，可是实现多种文件格式预览
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
weixin_69174819的博客
07-20 3603
插件来实现，可在线预览也支持多人协同编辑，也无需安装，自动保存，这样看是很符合领导的需求了,但是他的文件有暴露风险（公司文件密级特别高，我可不想吃免费饭）：一个用于在Vue项目中预览PPT文件的插件，支持在线预览PPT文件，并提供缩略图和全屏预览功能。: 一个强大的在线文件预览和编辑控件，可以支持内网使用，同时也支持多人协同编辑。（pass掉的原因：可以预览，不能编辑，内网使用要考虑的安全性问题太多）（文件不用上传到服务器，我是放到本地的，文件路径写本地的就好，避免文件泄露）（可直接复制，改一下组件名。
vue-preview 使用指南
最新发布
gitblog_00035的博客
08-20 366
vue-preview 使用指南 vue-previewA Vue Integrated PhotoSwipe Image Preview Plugin项目地址:https://gitcode.com/gh_mirrors/vu/vue-preview 项目目录结构及介绍 以下是对 vue-preview 开源项目可能的典型目录结构及其简介： vue-preview/ ├── src ...
vue中预览docx、xlsx、pptx、pdf
可达鸭的博客
04-11 4415
我这里多了个showPreview用来处理ppt的预览，因为他原生的ppt预览是增加一个弹窗，我需要当前页面展示，样式不符合要求，我就修改了,\node_modules\ranui\dist\components\preview\index.js 里对应第一个文件。前言：其实本来是要做全类型文件预览的，但是一直找不到合适的doc,xlx,ppt预览插件。要是有可以使用的，可以评论推荐给我。好像是pdf在预览时样式很奇怪：所以pdf我是通过ifream进行预览。我使用的node版本：v18.19.1。
vue项目图片预览vue-photo-preview，2024年最新2024年最新面试题
2401_83974087的博客
04-10 888
3、使用preview值相同为同组图片。preview-text为预览时下方描述文字。img的src默认为缩略图，如不填写large，则展示src。若有large，则显示large大图。注意1、上面为简单使用，option其实还有更多可配置项，例如：fullscreenEl: false, //控制是否显示右上角全屏按钮closeEl: false, //控制是否显示右上角关闭按钮tapToClose: true, //点击滑动区域应关闭图库。
使用vue-preview实现缩略图
科大306晓岩的博客
08-14 3034
1.项目中安装组件 npm i vue-preview -S 2.main.js中引入插件,挂载到Vue import VuePreview from 'vue-preview'; Vue.use(VuePreview); 3.在组件中使用,代码如下(代码中数据为假数据,调后台接口请在methods中自行添加代码): <!--缩略图区域--> <template&...
vue-photo-preview.zip
05-27
vue-photo-preview 插件的使用非常简单，开发者只需要将下载的文件解压后，将相应的组件引入到自己的Vue项目中。以下是一些关于如何使用这个插件的关键知识点： 1. **安装**：首先，你需要确保项目中已经安装了Vue....
解决vue-photo-preview 异步图片放大失效的问题
10-15
npm install --save vue-picture-preview # 或者使用 cnpm 安装 ``` 然后在`main.js`中全局注册该组件： ```javascript import VuePicturePreview from 'vue-picture-preview' Vue.use(VuePicturePreview) ``` 在...
vue-doc-preview:Vue文档预览组件
05-06
vue-doc-preview vue文档预览组件，此组件将在页面上显示文档的内容。 英文自述文件|用进口首先，从yarn或npm添加此程序包。 yarn add vue-doc-previewornpm i vue-doc-preview --save然后，将此组件导入.vue文件。 ...
vue-picture-preview:移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe
05-17
vue-picture-preview 移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe. 安装 npm install --save vue-picture-preview 使用 入口文件中全局引入 import Vue ...
vue-devtools@6.1.4谷歌插件
04-27
vue-devtools是Vue开发的调试工具，官方推荐使用，vue-devtools第6代支持vue2和vue3，以及pinal，官方提供源代码，但是需要自己构建，构建的过程基本上没有3个坑都不能成功，这里直接分享一些，需要的小伙伴可以拿去
Vue实现pptx在线预览
qq_43075191的博客
07-06 9591
PPTX在线预览，使用jquery的插件《PPTXjs》，纯前端实现pptx转html进行展示
vue预览 pdf、word、xls、ppt、txt、csv文件方法
MISS_zhang_0110的博客
05-10 1953
word、xls、ppt、pdf 这些文件要用 微软官方的预览地址。注意：1. 文件地址必须公网；2. 静态资源不要有访问权限。
Vue Preview 使用教程
gitblog_00631的博客
08-20 304
Vue Preview 使用教程 vue-previewA Vue Integrated PhotoSwipe Image Preview Plugin项目地址:https://gitcode.com/gh_mirrors/vu/vue-preview 1. 项目介绍 Vue Preview 是一个旨在提升 Vue.js 开发体验的工具，它允许开发者在 Visual Studio Code (V...
图片预览插件vue-photo-preview的使用
zuo-yiran的博客
08-11 849
vue图片预览插件vue-photo-preview的使用
vue在线预览Word，PDF，Excel ，ppt 等
行子的博客
10-17 2008
XDOC 不管是功能还是整合UI 页面转化渲染 都很强大快捷 还可以自动识别分类 导航栏 （功能最完善 需要付费！-office docx-preview xlsx vue-pdf 等等。Office Online 使用方法非常简单（免费中最快捷最方便的使用方法）使用方法和上方Office Online相同。免费实例有大小和时间限制，不够卖不推荐使用。配合弹窗或者自定义导航进行使用。
Vue实现文档在线预览
m0_66079885的博客
09-14 3584
Vue实现文档在线预览
使用vue-cli3开发Chrome插件全攻略
"这篇文章主要介绍了如何使用vue-cli3来开发Chrome插件，通过vue-cli-plugin-chrome-ext插件实现快速编译打包，并引入了element-ui作为UI框架进行按需加载，以减小插件的文件大小。" Vue CLI 3 是 Vue.js 官方提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值