Инициализируйте Viewer.js в функции смонтированного хука. (Ошибка: первый аргумент обязателен и должен быть элементом)

Question

Привет, ребята. Я новичок в vue.js, я пытаюсь реализовать функции масштабирования, вращения, масштабирования и некоторых других функций с помощью модуля npm: npm viewerjs module. Выполнены следующие действия: Github repo . И я получаю проблему, как показано ниже:

Исследовал проблемы с github и нашел ответ здесь: Ссылка на проблему Github . @ fengyuanchen говорит как:

должен инициализировать Viewer.js в функции mounted hook.

Пожалуйста, предложите мне, как инициализировать viewer.js в смонтированном. Заранее спасибо.

Answer 1

TommyF идеально подходит. Однако я бы рекомендовал использовать средство просмотра в качестве динамических данных Vue, поэтому вы сможете использовать методы, события и все функции библиотеки средства просмотра внутри компонента Vue.

   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>

Answer 2

Это будет считаться инициализацией: https://github.com/fengyuanchen/viewerjs#syntax.
Используйте mounted крюк жизненного цикла, чтобы вызвать его: https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

Поскольку для Viewer требуется элемент html, вы можете использовать Vue ref для ссылки на элемент контейнера: <div class="container" ref="foo"> и затем передать его конструктору Viewer в хуке mounted:

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

Пример, как настроить его здесь, вам нужно будет указать нужные опции и UX. https://codesandbox.io/s/kk4n8xjn25