마운트된 후크 함수로 Viewer.js를 초기화합니다.(오류:첫 번째 인수는 필수이며 요소여야 합니다.)

마운트된 후크 함수로 Viewer.js를 초기화합니다.(오류:첫 번째 인수는 필수이며 요소여야 합니다.)

닫았습니다. 이 질문은디버깅 상세현재 답변을 받고 있지 않습니다.

---

이 질문을 개선하시겠습니까?스택 오버플로의 토픽이 되도록 질문을 업데이트합니다.

작년에 문을 닫았어요.

이 질문을 개선하다

저는 vue.js에 익숙하지 않습니다.npm 모듈을 사용하여 이미지 확대, 회전, 스케일링 및 기타 기능을 구현하려고 합니다.npm viewerjs모듈.

다음의 순서를 실행했습니다.Github repo.그리고 다음과 같은 문제가 발생합니다.

Github 문제에 대해 조사했더니 여기서 답을 찾았습니다.Github 문제 링크.@fengyuanchen은 다음과 같이 말합니다.

초기화해야 한다Viewer.js에서mounted훅 기능

마운트된 viewer.js를 초기화하려면 어떻게 해야 합니까?

TommyF 응답은 완벽합니다.단, 뷰어를 동적 Vue 데이터로 사용하는 것이 좋습니다.따라서 Vue 컴포넌트 내에서 Viewer 라이브러리의 메서드, 이벤트 및 모든 기능을 사용할 수 있습니다.

   const app = new Vue({
      el: '#app',
      data() {
        return {
          viewer: null,
          mode: 'modal',
        }
      },
      created() {

      },
      methods: {
        zoom(value) {
          this.viewer.zoom(value);
        },
        close() {
          this.viewer.exit();
        },
        toggleMode(newmode) {
          if (newmode != this.mode) {
            this.mode = newmode;
            this.viewer.destroy();
            this.viewer = new Viewer(this.$refs.gallery, {
              inline: (this.mode === 'inline'),
              url: 'data-original',
            });
          }
        }
      },
      mounted() {
        this.viewer = new Viewer(this.$refs.gallery, {
          inline: false,
          url: 'data-original',
        });
      }
    })

아래의 예를 참조해 주세요.

const app = new Vue({
  el: '#app',
  data() {
    return {
      viewer: null,
      mode: 'modal',
    }
  },
  created() {

  },
  methods: {
    zoom(value) {
      this.viewer.zoom(value);
    },
    close() {
      this.viewer.exit();
    },
    toggleMode(newmode) {
      if (newmode != this.mode) {
        this.mode = newmode;
        this.viewer.destroy();
        this.viewer = new Viewer(this.$refs.gallery, {
          inline: (this.mode === 'inline'),
          url: 'data-original',
        });
      }
    }
  },
  mounted() {
    this.viewer = new Viewer(this.$refs.gallery, {
      inline: false,
      url: 'data-original',
    });
  }
})

<link rel="stylesheet" href="https://fengyuanchen.github.io/viewerjs/css/viewer.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://fengyuanchen.github.io/viewerjs/js/viewer.js"></script>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 1fr;
  }
  
  .grid::before {
    content: '';
    width: 0;
    padding-bottom: 100%;
    grid-row: 1 / 1;
    grid-column: 1 / 1;
  }
  
  .grid>*:first-child {
    grid-row: 1 / 1;
    grid-column: 1 / 1;
  }
  
  .grid img {
    width: 100%;
    height: 100%;
  }
</style>
<div id="app">

  <button @click="zoom(0.1)"> zoom + </button>
  <button @click="zoom(-0.1)"> zoom - </button>
  <button @click="close()"> close </button>
  <button @click="toggleMode('inline')"> inline </button>
  <button @click="toggleMode('modal')"> modal </button>

  <div>
    <div ref="gallery" class="grid">
      <img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-1.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-1.jpg" alt="Cuo Na Lake">
      <img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-2.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-2.jpg" alt="Tibetan Plateau">
      <img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-3.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-3.jpg" alt="Jokhang Temple">
      <img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-4.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-4.jpg" alt="Potala Palace 1">
      <img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-5.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-5.jpg" alt="Potala Palace 2">
      <img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-6.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-6.jpg" alt="Potala Palace 3">


    </div>
  </div>
</div>

이것은 초기화로 간주됩니다.https://github.com/fengyuanchen/viewerjs#syntax
를 사용합니다.mounted라이프 사이클 후크:https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

부터ViewerVue를 사용할 수 있는html 요소가 필요합니다.ref컨테이너 요소를 참조하려면:<div class="container" ref="foo">그런 다음 Viewer 컨스트럭터에 공급합니다.mounted후크:

mounted() {
  const viewer = new Viewer(this.$refs.foo)
}

여기서 설정하는 방법의 예에서는, 필요한 옵션과 UX 를 지정할 필요가 있습니다.https://codesandbox.io/s/kk4n8xjn25

언급URL : https://stackoverflow.com/questions/53166812/initialize-viewer-js-in-the-mounted-hook-function-error-the-first-argument-is