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

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"

<div class="img-list" id="blueimp-gallery-links">
  <a href="图片放大后的链接" data-type="photo">
    <img src="图片链接" alt="图片描述">
  </a>
  <a href="图片放大后的链接" data-type="photo">
    <img src="图片链接" alt="图片描述">
  </a>
  ...
</div>

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

<!-- 图片轮播 The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
  <div class="slides"></div>
  <h3 class="title"></h3>
  <a class="prev">‹</a>
  <a class="next">›</a>
  <a class="close">×</a>
  <a class="play-pause"></a>
  <ol class="indicator"></ol>
</div>

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。可以写成组件的形式使用。