我要投稿

css放大镜-Vue图像放大镜、相册合集：vue-photo-preview

bendan520 css

2023-08-29 0 8,146 百度已收录

进不了网站？换个网络试试！

Vue-photo-preview 我们都知道Ant-Design有自己的图片预期属性。只需添加预览属性即可将图片全屏放大，甚至可以做成照片集，非常美观又好用。而如果我们使用Element的UI并想达到这样的效果怎么办？尝试使用 vue-photo-preview。我们走吧！！！ 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);
// 这样我们就可以预览图片啦

然而，当我们检查源码时，我们发现它仍然需要选择属性。如果未传入选项，则将使用默认设置。这里我们查阅了官网，总结了一些实用的属性，给大家推荐了一套属性。

下图是源码的默认配置

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: ' / ',//图片数量的分隔符
}

通过我的讲解，你应该明白属性的含义了，你可以根据各个区的需求来设置自己的个性化预览效果css放大镜，推荐一下我那边项目中的配置。

// 有些比较不重要的，默认又符合我想要的就没配置，使用默认的就可以了
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);

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

"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="描述文字">