vue项目中移动端的图片预览

最新推荐文章于 2025-03-03 14:31:35 发布

qq_40919692

最新推荐文章于 2025-03-03 14:31:35 发布

阅读量776

点赞数

分类专栏：记录文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_40919692/article/details/115507346

版权

本文探讨了在Vue项目中实现移动端图片预览的三种方法：wc-view、vant的upload组件以及v-viewer。wc-view仅能放大预览；vant的upload组件允许放大但无法无限放大；v-viewer则同时支持预览和手动无限放大，最终被选为最佳方案。详细介绍了每个方法的引入和使用步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我试过三种方式分别是wc-view、vant中的upload组件、v-viewer插件（也可用于pc端）。
这三种的差别在于
wc-view：只可以放大预览，不可以手动放大图片。
vant中的upload组件：可以放大预览，也可以手动放大，但是它不可以无限放大。
v-viewer：是既可以放大预览，也可以手动放大，最终我选择了这一钟

1、wc-view插件的方式

首先安装依赖

npm i wc-view --save-dev

在main.js中引入文件

import wcView from 'wc-view';
import 'wc-view/style.css';
Vue.use(wcView);

使用

img 标签时: 
<img class="wc-preview-img" :src="url" v-for="(url, key) in list" :key="key" @click="$preview($event, list, key)">

如果 list 是一个对象数组的时候,
需要额外为 $preview 传递一个参数, 用于标记对象里哪一个字段是图片 url;
<img class="wc-preview-img" :src="item.img" v-for="(item, key) in list" :key="key" @click="$preview($event, list, key,'img'

最低0.47元/天解锁文章