vue2 v-viewer+toast editor 이미지 뷰어 처리

참고 예제 ) https://codesandbox.io/s/v-viewer-click-to-show-forked-5y2ern

toast editor 뷰어에서 이미지를 클릭하여 확대 축소가 가능한 이미지 뷰어 기능을 추가

1. 터미널을 열어 사용중인 프로젝트경로에 v-viewer 모듈을 설치

   npm i v-viewer

2. editor viewer 파일에서 아래 함수 실행
   ( editor viewer의 영역도 같은 클래스명과 아이디를 사용 하기때문에 eventbus를 사용하여 데이터 전송 후 처리 )

    checkImageWrapper() {
      const toastV = this.$el.querySelector('#viewer');
      const images = toastV.querySelectorAll('img');

      images.forEach((item, idx) => {
        const dom = document.createElement('div');

        // 이미지 뷰어 처리
        dom.addEventListener('click', function () {
          EventBus.$emit(EventBus.SHOW_IMAGE_VIEWER, { images, idx });
        });

        dom.appendChild(item.cloneNode(true));
        dom.setAttribute('style', 'cursor: pointer;');
        item.parentNode.replaceChild(dom, item);
      });
    },

3. eventbus 를 받아 v-view를 그려주는 함수 호출 ( ImgViewer.vue 파일은 참고예제 링크 참고 )

<template>
  <div>
    <img-viewer ref="viewer" />
  </div>
</template>

<script>
import EventBus from '@/common/EventBus';
import ImgViewer from '@/components/viewer/ImgViewer';

export default {
  name: 'ImgViewerMain',
  components: { ImgViewer },
  data() {
    return {
      options: {
        url: 'data-source',
      },
      index: 0,
      images: [],
    };
  },
  mounted() {
    EventBus.$on(EventBus.SHOW_IMAGE_VIEWER, (data) => {
      this.images = [];
      data.images.forEach((val) => {
        this.images.push({
          thumbnail: val.currentSrc,
          source: val.currentSrc,
        });
      });
      this.show(data.idx);
    });
  },
  methods: {
    show(index) {
      this.$refs.viewer.show(this.images, index);
    },
  },
};
</script>