vue use embed PhotoSwipe to render images in rich text（make img in rich text clickable, and can show as gallery）

demo.html

<rich-text-render v-bind:html="m.content" style="overflow-y: scroll"></rich-text-render>

richTextRender.vue

<template>
  <div>
    <p v-html="html"></p>
    <div id="pswp" class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="pswp__bg"></div>
      <div class="pswp__scroll-wrap">
        <div class="pswp__container">
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
          <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
          <div class="pswp__top-bar">
            <div class="pswp__counter"></div>
            <button class="pswp__button pswp__button--close" title="关闭 (Esc)"></button>
            <button class="pswp__button pswp__button--zoom" title="放大/缩小"></button>
            <div class="pswp__preloader">
              <div class="pswp__preloader__icn">
                <div class="pswp__preloader__cut">
                  <div class="pswp__preloader__donut"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
            <div class="pswp__share-tooltip"></div>
          </div>
          <button class="pswp__button pswp__button--arrow--left" title="上一张">
          </button>
          <button class="pswp__button pswp__button--arrow--right" title="下一张">
          </button>
          <div class="pswp__caption">
            <div class="pswp__caption__center"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import PhotoSwipe from 'photoswipe'
  import PhotoSwipeUIDefault from 'photoswipe/dist/photoswipe-ui-default.js'

  export default {
    props: {
      'html': String
    },
    data () {
      return {
        pswpElement: null,
        imgItems: []
      }
    },
    methods: {
      onThumbnailsClick (e) {
        if (this.imgItems.length > 0) {
          e = e || window.event
          e.preventDefault ? e.preventDefault() : e.returnValue = false
          let eTarget = e.target || e.srcElement
          this.openGallery(+eTarget.getAttribute('idx'))
        }
      },
      openGallery (index) {
        let vm = this
        let gallery = new PhotoSwipe(this.pswpElement, PhotoSwipeUIDefault, this.imgItems, {
          index: index,
          getThumbBoundsFn (index) {
            let thumbnail = vm.imgItems[index].el
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            let rect = thumbnail.getBoundingClientRect()
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          }
        })
        gallery.init()
      }
    },
    watch: {
      html (val) {
        if (val) {
          this.$nextTick(() => {
            this.imgItems = []
            let imgList = this.$el.querySelectorAll('img')
            for (let i = 0; i < imgList.length; i++) {
              let img = imgList[i]
              let vm = this
              img.onload = function () {
                let img = this
                let imgWidth = img.naturalWidth
                let imgHeight = img.naturalHeight
                if (imgWidth > 50 && imgHeight > 50) {
                  img.onclick = vm.onThumbnailsClick
                  img.setAttribute('idx', vm.imgItems.length)
                  img.className = 'img-responsive'
                  if (imgWidth < 576) {
                    imgWidth *= 2
                    imgHeight *= 2
                  } else if (imgWidth >= 576 && imgWidth < 992) {
                    imgWidth = 992
                    imgHeight = imgHeight * 992 / imgWidth
                  }
                  vm.imgItems.push({src: img.src, w: +imgWidth, h: +imgHeight, el: img})
                }
              }
            }
          })
        }
      }
    },
    mounted () {
      this.pswpElement = document.getElementById('pswp')
    }
  }
</script>

<style lang="less" scoped>
  @import '~photoswipe/dist/photoswipe.css';
  @import '~photoswipe/dist/default-skin/default-skin.css';
</style>

让富文本中的图片可以点击并调出photoswipe画廊