Initialize Viewer.js in the mounted hook function. (Error: The first argument is required and must be an element)

Question

我是 vue.js 的新手，我正在尝试使用 npm 模块实现图像缩放、旋转、缩放和其他一些功能：npm viewerjs 模块。

我遵循了这些步骤：Github repo。我遇到了如下问题：

研究了 github 个问题并在此处找到了答案：Github issue link .@fengyuanchen 说:

have to initialize Viewer.js in the mounted hook function.

如何初始化挂载的viewer.js？

Answer 1

这将被视为初始化：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"> 然后将其提供给查看器构造函数mounted 挂钩：

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

这里是如何设置的例子，你必须提供所需的选项和用户体验。 https://codesandbox.io/s/kk4n8xjn25

Answer 2

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>

Initialize Viewer.js in the mounted hook function. (Error: The first argument is required and must be an element)

Initialize Viewer.js in the mounted hook function. (Error: The first argument is required and must be an element)

javascript

vue.js

vuejs2

viewer