vue-preview 插件的使用缩放图片

最新推荐文章于 2025-11-20 11:11:41 发布

原创最新推荐文章于 2025-11-20 11:11:41 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue-priview

vue 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一个Vue集成PhotoSwipe图片预览插件的使用方法。通过配置全局样式和在main.js中导入必要的文件，实现了图片的缩放功能。文章还提供了一个实例代码用于展示如何设置图片属性。

vue-preview

一个Vue集成PhotoSwipe图片预览插件
这个插件可以实现图片的缩放，因为这个插件已经更新了，所有可能有的小伙伴不会使用或者出现了一些小错误，如 Property or method “$preview” is not defined on the instance but referenced during之类的
首先配置golbal.css 全局文件

.thumbs{
    display:flex;
}
.thumbs >div {
   width: 100%
}
.thumbs .my-gallery{
    display:flex;
    flex-wrap:wrap
}
.thumbs .my-gallery figure{
  margin: 10px;
  box-shadow: 0 0 10px #ccc
}
.thumbs .my-gallery figure img{
    width: 100px;
    vertical-align: middle;
}

然后在main.js中导入 import './lib/mui/css/golbal.css’

template中的

script中
result.body.message.forEach(item => {
(item.w = 600), (item.h = 400),(item.msrc = item.src); //其中item.msrc是小图片
//要求两张大小图片都要，如果只有一张，链接直接一样就好了
});
this.thumbImgList = result.body.message; //thumbImgList是存放图片的对象数组
}