东林博客

在Vue中优雅使用LightGallery.js

LightGallery 是我用过的最好用的画廊特效JS。没有之一。效果上不仅丰富而全面,支持自定义是否开启缩略图、开启图片放大缩小模式,图片分享及下载功能,还有视频的播放功能。

安装上不仅支持jQuery,也支持原生JS,用在Vue中。jQuery版的LightGallery的使用方法就不赘述了。总结一下在Vue中的使用技巧。

LightGallery的DEMO中的图片集合,是直接赋值在数据对象中,运行没有问题。这是一段可以正常运行起来的代码:

package.json

"lightgallery.js":"^1.1.3",
"lg-thumbnail.js": "^1.1.0",
"lg-autoplay.js": "^1.0.0",
"lg-video.js": "^1.0.0",
"lg-zoom.js": "^1.0.1",
"lg-fullscreen.js":"^1.1.0",

注意后面有 .js 。第一次在npm搜索中没注意,不是安装 lightgallery,而是lightgallery.js 

页面中直接把图片集合赋值到数据对象中:

<template>
        <div id="aniimated-thumbnials" class="list-unstyled row">
            <a v-for="v in value" :href="v">
                <img class="mw-100" :src="v+'-250x250.jpg'">
            </a>
        </div>
<template>

<script>
    import 'lightgallery.js'
    import 'lg-thumbnail.js'
    import 'lg-autoplay.js'
    import 'lg-video.js'
    import 'lg-zoom.js'
    import 'lightgallery.js/dist/css/lightgallery.css'
    export default {
        name: "TestPage",
        data() {
            return {
                images:[
                    'xxxx.jpg',
                    'xxxx.jpg'
                ]
            }
        },
        mounted() {
            var el = document.querySelector('#aniimated-thumbnials');
            lightGallery(el,{
                thumbnail:true
           });
        },
    }
<script>

但是实际的生产场景中,并不是如此。因为图片集合都是通过请求接口获得,这个时候因为lightgallery已经渲染过,所以再赋值给image不会生效。

解决办法是:封装一个Vue组件  <tm-gallery></tm-gallery>:

<template>
    <div class="demo-gallery">
        <div id="aniimated-thumbnials" class="list-unstyled row">
            <a v-for="v in value" :href="v">
                <img class="mw-100" :src="v+'-250x250.jpg'">
            </a>
        </div>
    </div>
<template>

<script>
    import 'lightgallery.js'
    import 'lg-thumbnail.js'
    import 'lg-autoplay.js'
    import 'lg-video.js'
    import 'lg-zoom.js'
    import 'lightgallery.js/dist/css/lightgallery.css'
    export default {
        name: "TmGallery",
        props: {
            value: {
                type:Array,
                default:()=>{return []}
            }
        },
        mounted() {
            var el = document.querySelector('#aniimated-thumbnials');
            lightGallery(el,{
                thumbnail:true
            });
        },
        created() {

        }
    }
<script>

在页面中这样调用组件:

<template>
    <div>
        {data.title}
        <tm-gallery v-if="data.images.length>0" :value="data.images"></tm-gallery>
    </div>
<template>

<script>

    import TmGallery from "../common/tm-gallery";
    export default {
        name: "LandDetail",
        components: {TmGallery},
        props:{
            id:Number
        },
        data() {
            return {
                data:{

                },
                loading:false,
            }
        },
        watch:{
            id(){
                this.data = [];
                if(this.id > 0){
                    this.getLand()
                }
            }
        },
        mounted() {
            if(this.id > 0){
                this.getLand()
            }
        },
        created() {


        },
        methods: {
            handleClick(){

            },
            getLand(){
                this.loading = true;
                this.$axios.get('/land',{id:this.id}).then((res)=>{
                    this.loading = false;
                    if(res.status == 200){
                        this.data = res.data;
                    }else{
                        this.$message.warning('获取信息失败')
                    }
                })
            }
        }
    }
</script>


{{tip}}