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

在vue 中引入vue-picture-preview 实现图片点击查看的功能

本想贴demo的效果视频,找来找去没看到怎么贴视频,囧~ 现在贴图吧

一.页面的整体效果

vue中使用vue-picture-preview 图片查看器_第1张图片

二、点击第一张图片的效果

vue中使用vue-picture-preview 图片查看器_第2张图片

三、点击第二张图片的效果

vue中使用vue-picture-preview 图片查看器_第3张图片

贴完发现图片有点大,懒得去处理了,就酱吧,废话不说上代码。

1.安装依赖

cnpm install --save-picture-preview

2.在main.js中引入vue-picture-preview

import vuePicturePreview from 'vue-picture-preview'  //引入图片查看器

3.在main.js中调用

Vue.use(vuePicturePreview);

4.在根组件中放置


啰嗦几句,一定是根组件中!!!我一开始放错地方了,一直没法预览,一不小心进坑了!
我的项目根组件是App.vue,html代码如下


配置完了,就可以在页面中正常使用了

1.HTML部分


2.JS部分


3.CSS部分


结束,如有问题欢迎指正!还有用到的美图来源见水印。

你可能感兴趣的:(vue爬坑之路)