Vue使用lightgallery.js实现图像缩略图

<template>
<div id="lightgallery">
  <a href="img/img1.jpg">
      <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg">
      <img src="img/thumb2.jpg" />
  </a>
</div>
</template>
<script>
import 'lightgallery.js'
import 'lightgallery.js/dist/css/lightgallery.css'
export default {
  mounted() {
    var el = document.querySelectorAll('#lightgallery')
    el.forEach(item => {
      lightGallery(item, {
        thumbnail: true
      })
    })
  },
}
</script>

普通的vue这样就可以实现缩略功能了,但是实际项目里,数据一般都不是写死在本地的,这次需要这个功能的页面是后台编辑的,所以等请求完数据页面加载之后:

this.$nextTick(() => {
	window.lightGallery(document.getElementById('lightgallery'), {
	    subHtmlSelectorRelative: true,
        selector: '.item', //自定义选择器属性，而不只是孩子。通过this选择相同的元素
        download: false
   })
})