更新记录

1.0.0（2021-07-07） 下载此版本

发布1.0.0

平台兼容性

• 注意此插件仅支持H5!!!!!!!!
• 基于photoswipe封装，组件已使用getImageInfo获取图片宽高，也可以后台返回宽高来节省性能。
• 图片必须要有宽高。
• npm i photoswipe
• 配置项请参考photoswipe文档 photoswipe官网或自行百度中文文档
• 解决自带previewImage放大缩小图片变模糊的问题
• 只渲染3个div与图片数量无关，其他插件大多都是N张图片就加载了N个dom，此组件最多加载3个所以性能高于大部分组件。

  npm i photoswipe

import photoswipe from '@/components/ben-photoswipe/ben-photoswipe.vue'

<photoswipe ref="prImgs" :imgs.sync="ImageList"></photoswipe>

export default {
        components: {
            photoswipe
        },
        data() {
            return {
                //为了更直观，原图和缩略图用了两张不同的图片
                ImageList:[{
                    imgUrl:"https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=2511982910,2454873241&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
                    picture:false,
                }]
            }
        },
        onLoad() {

        },
        onShow() {
            //可以去掉，防止从其他页面调回来图片不显示，这里强制初始化一下
            this.$nextTick(()=>{
                if(this.$refs.prImgs){
                    this.$refs.prImgs.resImg()
                }

            })

        },
        methods: {
            prviewImage(k){
                 this.$refs.prImgs.initImage(k)
            }
        }
    }
}