vue 图片查看器(可缩放，翻上下一页等)使用

╰半夏微凉° 2022-03-30 03:22 440阅读 0赞

[NPM][]

1.安装

npm install vue-photo-preview --save

2.main.js引入

import preview from 'vue-photo-preview'
    import 'vue-photo-preview/dist/skin.css'
    
    var options = {
        tapToClose: true, //点击图片默认关闭
        closeEl:true,    //显示关闭按钮
        captionEl: true,    
        fullscreenEl: false,//全屏
        zoomEl: false,    //放大镜
        shareEl: false,//分享
        counterEl: true,//页数
        history:true,//打开历史记录（点击返回可回原来页面）
      }
    Vue.use(preview,options)

3.使用

//在img标签添加preview属性 preview值相同即表示为同一组
    <img src="xxx.jpg" preview="0" preview-text="描述文字">
    
    //分组
    <img src="xxx.jpg" preview="1" preview-text="描述文字">
    <img src="xxx.jpg" preview="1" preview-text="描述文字">
    
    <img src="xxx.jpg" preview="2" preview-text="描述文字">
    <img src="xxx.jpg" preview="2" preview-text="描述文字">

4.处理异步图片点击没反应

//在得到图片后执行
    this.$previewRefresh();

5.其余三个差不多的图片组件

[https://www.jianshu.com/p/e3350aa1b0d0][https_www.jianshu.com_p_e3350aa1b0d0]

[NPM]: http://npm.taobao.org/package/vue-photo-preview
[https_www.jianshu.com_p_e3350aa1b0d0]: https://www.jianshu.com/p/e3350aa1b0d0

发表评论取消回复

表情：

评论列表（有 0 条评论，440人围观）

还没有评论，来说两句吧...

相关阅读

相关 js等比例缩放图片

有时网页很容易被大图片撑开，下面的js小技巧可以用来解决这个问题。 js获得图片大小和容器的大小进行比较然后重新设置图片的显示大小，示例如下： Code:

旧城等待，/ 2024年02月17日 20:16/ 0 赞/ 100 阅读

相关等比例缩放多个图片

最新做了一个等比例缩放多个图片，保证所有图片宽高相等并不失真的功能，现将代码粘贴出来。 import javax.imageio.ImageIO; impor

淩亂°似流年/ 2023年10月10日 18:40/ 0 赞/ 117 阅读

相关 layer.photos 相册（图片查看器）实现缩放

2019年4月12日 layer版本 layer-v3.1.1 layer.photos 方法在使用过程中发现没有通过鼠标中键（滚轴）实现图片缩放功，故通过搜索引擎找到如下方

落日映苍穹つ/ 2023年07月01日 08:34/ 0 赞/ 18 阅读

相关图片等比例自适应缩放

图片的父级元素宽度写成百分比形式，图片的宽高取100%即可 <li class="desktops_item"> <img clas

忘是亡心i/ 2023年01月08日 12:26/ 0 赞/ 348 阅读

相关 php等比例缩放图片

/ 处理图片尺寸【等比例缩小或放大】 @param $filePath【进行处理图片本地地址】 @param $saveImage【处理后保存地址】 @para

秒速五厘米/ 2022年11月26日 15:52/ 0 赞/ 289 阅读

相关 CSS控制图片等比例缩放

图片最大宽度为1000px 超过1000px自动等比例缩放至1000px .imgs { max-width: 1000px;//非I

你的名字/ 2022年07月12日 01:15/ 0 赞/ 298 阅读

相关 CSS控制图片等比例缩放

img{ width: auto; height: auto; max-width: 100%;

亦凉/ 2022年05月21日 01:54/ 0 赞/ 346 阅读

相关 vue 图片查看器(可缩放，翻上下一页等)使用

[NPM][] 1.安装 npm install vue-photo-preview --save 2.main.js引入 import preview

╰半夏微凉°/ 2022年03月30日 03:22/ 0 赞/ 441 阅读

相关全屏图片等比例缩放

/ 大图自动等比例缩放。 / var bxsliderImgs = $(".bxslider").add(".b

Bertha 。/ 2022年01月16日 10:37/ 0 赞/ 413 阅读

相关 js等比缩放图片居中

需求，给定相框大小，将所选图片等比缩放进相框居中位置因为要求精确度不高，在计算时取了2位小数，对结果取整 / 等比缩放图片并居中摆放 @

爱被打了一巴掌/ 2021年06月24日 16:10/ 0 赞/ 517 阅读