【Nuxt.js 踩坑日志】 - 引入多功能图片展示插件 blueimp-gallery

1. 在 github下载 blueimp-gallery https://github.com/blueimp/Gallery，并复制到static目录下（注：该目录下的资源不会被webpack处理，官网描述 静态文件
   ）

2. 在 nuxt.config.js中添加样式，如下：

/*
   ** Global CSS
   */
  css: [
    ... // 其他的样式
    '~/static/blueimp-gallery/css/blueimp-gallery.min.css' // blueimp 图片轮播插件
  ],

3. 在需要使用到的.vue文件中引入 js

// 在浏览器环境下才使用
if (process.client) {
  require('@/static/blueimp-gallery/js/blueimp-gallery.min.js')
}

注意不能通过 import引入，否则会报错window is not defined，官网 Window 或 Document 对象未定义？

4. 在 .vue文件的template中包含了相关图片链接的元素添加id="blueimp-gallery-links"

  
    
  
  
    
  
  ...

5. 在 .vue文件的template中添加如下代码，可以跟在第4步的代码后面

  

  

  ‹
  ›
  ×
  
  

6. 在 mounted中进行图片点击放大的相关处理和配置https://github.com/blueimp/Gallery#options

mounted() {
    this.$nextTick(function() {
      // 在浏览器环境下才使用
      if (process.client) {
        document.getElementById('blueimp-gallery-links').onclick = (event) => {
          event = event || window.event
          let target = event.target || event.srcElement,
            link = target.src ? target.parentNode : target,
            options = { index: link, event: event },
            links = this.$el.querySelectorAll('a[data-type="photo"]') // 过滤掉其他的 a 标签
          if (target.parentNode.dataset.type == 'photo') {
            blueimp.Gallery(links, options)
          }
        }
      }
    })
  }

总结：该插件主要坑点就是需要在浏览器环境下使用 process.client。可以写成组件的形式使用。