vue-picture-preview

最新推荐文章于 2024-09-13 22:30:32 发布

咸鱼与梦想

最新推荐文章于 2024-09-13 22:30:32 发布

阅读量1.2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/angle_lzc/article/details/84383055

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

npm地址

//第一步vue使用
import vuePicturePreview from 'vue-picture-preview'
Vue.use(vuePicturePreview)

<!-- Vue root compoment template -->
<div id="app">
    <router-view></router-view>
//第二步使用vue-picture-preview的lg-preview组件
    <lg-preview></lg-preview>
</div>

//第三步使用v-preview指令
<img  v-preview="img.url" :src="img.url">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

咸鱼与梦想

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

pc 图片预览放大端vue_vue-preview vue图片预览插件+缩略图样式

weixin_39760650的博客

12-20

699

一、安装npm i vue-preview -S二、main.js中导入组件//vue-preview 开始import VuePreview from 'vue-preview';// defalut installVue.use(VuePreview)//vue-preview 结束三、代码1、要为缩略图设定样式，要在全局样式中设定，如下：/*图片预览缩略图*/.preview fig...

ImagePreview

03-29

使用Swift实现分屏滑动查看图片

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

vue-photo-preview.zip

05-27

基于vue的图片点击放大插件：vue-photo-preview，可全屏、左右滑动切换，适用于移动端和PC端，下载即用

vue vue-picture-preview 图片预览插件

最新发布

gitblog_09421的博客

09-13

417

Vue-Picture-Preview 安装与配置完全指南 vue-picture-preview 移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe. ...

vue中使用vue-picture-preview 图片查看器

weixin_42439024的博客

12-05

7850

在vue 中引入vue-picture-preview 实现图片点击查看的图片本想贴在这里插入图片描述视频来，找来找去没看到怎么贴视频，囧~ 现在贴图吧页面整体的样式图点击第一章张图片的效果点击第二图片时的效果贴完发现图片有点大，懒得去处理了，还有用到的美图来源见水印，废话不说上代码 1.安装依赖 cnpm install --save-picture-preview 2.在main....

gitblog_00029的博客

05-29

538

gitblog_00018的博客

05-29

821

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-photo-preview 异步图片放大失效的问题

10-15

此外，如果你的项目使用的是`vue-cli`，你可能需要安装`vue-picture-preview`这个组件，它提供了更丰富的图片预览功能。安装命令如下： ```bash npm install --save vue-picture-preview # 或者使用 cnpm 安装 ``` ...

vue-img-preview vue 2中的图像输入预览组件-Vue.js开发

05-27

看起来像这样（没有表单）安装npm install vue-img-preview --save从'vue'导入import Vue从'vue-img-preview'导入{vueImgPreview} Vue.component（'vue-img-preview'， vueImgPreview）浏览器使用情况

Vue Picture Preview 项目教程

gitblog_01071的博客

08-15

703

Vue Picture Preview 项目教程 vue-picture-preview移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe.项目地址:https://gitcode.com/gh_mirrors/vue/vue-picture-preview 1. 项目的...

三种图片预览插件viewer、vue-photo-preview、vue-picture-preview

weixin_54397440的博客

03-01

2395

preview图片预览插件data () {return {imgs: [title: '图片1',},title: '图片2',},

Vue-Picture-Preview：轻量级Vue.js图片预览解决方案

gitblog_09393的博客

09-13

397

Vue-Picture-Preview：轻量级Vue.js图片预览解决方案 vue-picture-preview 移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe. ...

vue全家桶开发管理后台—图片预览功能（vue-picture-preview）

麻球科技

03-21

1万+

安装：cnpm install --save-picture-preview使用：首先在项目的入口文件中引入, 调用 Vue.use 安装。main.js:import vuePicturePreview from 'vue-picture-preview' Vue.use(vuePicturePreview)在根组件添加 lg-preview 组件的位置App.vue:<template&...

探秘Vue.js图片预览神器：vue-picture-preview

gitblog_00524的博客

08-15

450

探秘Vue.js图片预览神器：vue-picture-preview vue-picture-preview移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe.项目地址:https://gitcode.com/gh_mirrors/vue/vue-picture-prev...

vue-photo-preview( 照片预览功能 )

weixin_54197236的博客

08-29

1469

Vue Photo Preview 是一个用于在 Vue.js 项目中实现图片预览功能的插件。

【VUE】图片预览放大缩小插件

小斌的博客

08-25

4227

【VUE】图片预览放大缩小插件

vue-cli项目使用vue-picture-preview图片预览组件

小智的博客

05-31

2715

一、下载安装 npm install --save vue-picture-preview-extend npm install --save vue-picture-preview // 如果安装了cnpm，推荐国内用户使用cnpm进行安装 cnpm install --save vue-picture-preview-extend cnpm install --save vue-pict...

vue结合element-ui如何实现图片预览

04-25

您好，关于您的问题，可以通过以下步骤实现图片预览： 1. 首先，需要安装并引入 element-ui 组件库和 vue-preview 插件。 2. 在需要实现图片预览的页面中，使用 <el-upload> 组件上传图片，并设置相关属性，如 action、before-upload、list-type 等。 3. 在 <el-upload> 组件的 slot 属性中添加自定义内容，这里可以使用 vue-preview 插件来实现图片预览。具体实现方法如下： ``` <el-upload action="your_upload_url" :before-upload="checkImage" list-type="picture-card"> <i slot="default" class="el-icon-plus"></i> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> // 添加自定义内容 <vue-preview :slides="slides"></vue-preview> </el-upload> ``` 4. 在 data 中定义 slides 数组，并在 checkImage 方法中动态生成 slides 数组的内容，用于传递给 vue-preview 组件进行图片预览。具体实现方法如下： ``` data() { return { slides: [] } }, methods: { checkImage(file) { const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG || !isLt2M) { this.$message.error('上传图片只能是 JPG/PNG 格式，且不超过 2MB'); return false; } // 生成 slides 数组，并使用 vue-preview 进行图片预览 const reader = new FileReader(); reader.readAsDataURL(file.raw); reader.onload = () => { this.slides.push({ src: reader.result }); this.$nextTick(() => { this.$refs.preview.open(); }); }; } } ``` 以上就是使用 vue 结合 element-ui 实现图片预览的方法了，希望能对您有所帮助。