Vue-photo-preview

我们都知道 Ant-Design 有自带图片的预料属性，只要添加 preview属性就能够全屏放大图片，甚至能做成一个相片集，很是美观好用。但是如果我们用了Element的UI，也想实现这个效果呢？试试用vue-photo-preview吧。Let's go!!!

vue-photo-preview的引入

npm i vue-photo-preview --save 
// 首先我们本地项目安装 vue-photo-preview

在main.js里面注册组件及样式

import preview from "vue-photo-preview";
import "vue-photo-preview/dist/skin.css";
// 当然还要引入vue组件
import Vue from "vue";
// 然后在Vue中使用我们的 vue-photo-preview
Vue.use(preview);
// 这样我们就可以预览图片啦

但是当我们查看源码的时候，发现它还要属性选择，如果没有传入options，那将使用默认的设置。这里我们查看了官网，总结了一些比较实用的属性，并推荐一份属性设置给大家。

下面这图是源码的默认配置

let options = {
    index:0, // 开始幻灯片索引。`0`是第一张幻灯片。必须是整数，默认为0
    showAnimationDuration:333, // 图片放大预览的过渡动画时间，必须是数字，默认为333毫秒
    hideAnimationDuration:333, // 顾名思义，图片隐藏的过渡动画时间，必须是数字，默认为333毫秒
    bgOpacity：0.85， //背景的不透明度
    maxSpreadZoom：2，// 执行展开（缩放）手势时的最大缩放级别。`2`意味着图像可以从原始尺寸放大 2 倍
    loop：true, // 默认循环轮播图片
    pinchToClose：true, //当图片缩小时，退出相册集
    closeOnScroll: true,//当滚动鼠标的时候，退出相册，这边默认true，建议false
    modal:true, // 控制 图片 是否应展开以占据整个视口。如果为 false，则 PhotoSwipe 元素将采用模板的定位父级的大小 ，默认为true
    fullscreenEl: false, //控制是否显示右上角全屏按钮
    closeEl: false, //控制是否显示右上角关闭按钮
    tapToClose: false, //点击滑动区域应关闭图库
    shareEl: false, //控制是否显示分享按钮
    zoomEl: false, //控制是否显示放大缩小按钮
    counterEl: true, //控制是否显示左上角图片数量按钮
    tapToToggleControls: true, //点击应切换控件的可见性
    clickToCloseNonZoomable: true, //点击图片应关闭图库，仅当图像小于视口的大小时
    indexIndicatorSep: ' / ',//图片数量的分隔符
}

通过我的解释，大家应该懂得属性的含义了吧，可以各区所需，设置自己个性的预览效果，这边推荐一份我项目里的配置哈

// 有些比较不重要的，默认又符合我想要的就没配置，使用默认的就可以了
let options = {
    maxSpreadZoom：1，// 执行展开（缩放）手势时的最大缩放级别。`2`意味着图像可以从原始尺寸放大 2 倍
    loop：true, // 默认循环轮播图片
    pinchToClose：true, //当图片缩小时，退出相册集
    closeOnScroll: true,//当滚动鼠标的时候，退出相册，这边默认true，建议false
    fullscreenEl: false, //控制是否显示右上角全屏按钮
    closeEl: false, //控制是否显示右上角关闭按钮
    tapToClose: false, //点击滑动区域应关闭图库
    shareEl: false, //控制是否显示分享按钮
    zoomEl: false, //控制是否显示放大缩小按钮
    counterEl: true, //控制是否显示左上角图片数量按钮
    indexIndicatorSep: ' / ',//图片数量的分隔符
}
// 然后将我们的配置 传入preview就好了
Vue.use(preview,options);

在项目中，我们如何使用呢？

<img src="url" alt="" width="200px"  height="200px" preview="1">
// preview 可以传入固定的值，可以是数字也可以是字符串。preview的值一样的图片会被归类于一个相册集。不一样的preview会单独成为一张图片预览

拓展一下，如果是普通的html页面，要怎么使用呢？

 // 分别引入css样式文件和vue-photo-preview的地址，就可以正常使用啦
<link rel="stylesheet" type="text/css" href="../dist/skin.css"/>
<script src="../dist/vue-photo-preview.js" type="text/javascript" charset="utf-8"></script>
<img v-for="item in img1" :src="item" preview="1" preview-text="描述文字">

这边的 review-text是指图片下方的图片描述，可以直接使用哦

放两张PC和mobile的效果图

结语

如果你觉得此文对你有一丁点帮助，点个赞，给我一点儿鼓励哈~

其他有趣文章的传送门：

• 一篇学会Array原型里的所有方法
• 一篇掌握Object原型里的所有方法
• 初识Vue3，带你认识Vue2和Vue3的区别（一）
• 奇怪的原型链冷知识(需要有一定原型链的基础才能看哦)
• 手摸手教你从0用echart写一个响应式页面