How to use viewerjs - 10 common examples

private initViewer(): void {
    if (this.instance) {
      this.instance.destroy();
    }

    this.instance = new Viewer(this.nativeElement, {
      // Transitions currently break the Viewer when running optimizations during ng build (i.e in prod mode)
      // TODO: Find a fix for this so we don't have to force disable transitions
      transition: false,
      ...this.viewerOptions
    });

    this.nativeElement.addEventListener('ready', event => this.viewerReady.emit(event), false);
    this.nativeElement.addEventListener('show', event => this.viewerShow.emit(event), false);
    this.nativeElement.addEventListener('shown', event => this.viewerShown.emit(event), false);
    this.nativeElement.addEventListener('hide', event => this.viewerHide.emit(event), false);
    this.nativeElement.addEventListener('hidden', event => this.viewerHidden.emit(event), false);
    this.nativeElement.addEventListener('view', event => this.viewerView.emit(event), false);
    this.nativeElement.addEventListener('viewed', event => this.viewerViewed.emit(event), false);
    this.nativeElement.addEventListener('zoom', event => this.viewerZoom.emit(event), false);
    this.nativeElement.addEventListener('zoomed', event => this.viewerZoomed.emit(event), false);
  }

createViewer () {
      this.$viewer = new Viewer(this.$el, this.options)
      this.$emit('inited', this.$viewer)
    }
  },

Vue.nextTick(() => {
      if (rebuild || !el[`$${name}`]) {
        destroyViewer(el)
        el[`$${name}`] = new Viewer(el, options)
        log('viewer created')
      } else {
        el[`$${name}`].update()
        log('viewer updated')
      }
    })
  }

this.each(function (i, element) {
      var $element = $(element);
      var isDestroy = option === 'destroy';
      var viewer = $element.data(NAMESPACE);

      if (!viewer) {
        if (isDestroy) {
          return;
        }

        var options = $.extend({}, $element.data(), $.isPlainObject(option) && option);
        viewer = new Viewer(element, options);
        $element.data(NAMESPACE, viewer);
      }

      if (typeof option === 'string') {
        var fn = viewer[option];

        if ($.isFunction(fn)) {
          result = fn.apply(viewer, args);

          if (result === viewer) {
            result = undefined;
          }

          if (isDestroy) {
            $element.removeData(NAMESPACE);
          }

next: true,
          rotateLeft: true,
          rotateRight: 4,
          flipHorizontal: true,
          flipVertical: true,
          ...customToolbar
        },
        navbar: false,
        ...restOptions,
        hidden: () => {
          hidden&&hidden()
          hide()////关闭的时候通过调用父组件方法触发父组件state来卸载子组件
        }
      };
      /*因为Viewer接受的参数必须是一个图片容器或者是一个图片元素，其他元素初始化会被中断*/
      this.viewer = new Viewer(ReactDom.findDOMNode(this.refs.imageListWrapper), options);
      this.viewer.view(index);
    }
    componentWillUnmount() {

this.each((i, element) => {
      const $element = $(element);
      const isDestroy = option === 'destroy';
      let viewer = $element.data(NAMESPACE);

      if (!viewer) {
        if (isDestroy) {
          return;
        }

        const options = $.extend({}, $element.data(), $.isPlainObject(option) && option);

        viewer = new Viewer(element, options);
        $element.data(NAMESPACE, viewer);
      }

      if (typeof option === 'string') {
        const fn = viewer[option];

        if ($.isFunction(fn)) {
          result = fn.apply(viewer, args);

          if (result === viewer) {
            result = undefined;
          }

          if (isDestroy) {
            $element.removeData(NAMESPACE);
          }

function() {
			if (this.viewer) {
				this.viewer.update();
			} else if (this.props.urls.length) {
				this.viewer = new Viewer(this.imgsEl, {
					transition: false,
					url(img) {
						return img.dataset.url;
					},
					ready: () => {
						const _container = this.viewer.viewer ? this.viewer.viewer : null;
						if (!_container || _container.querySelector(`.z-next`) !== null) {
							return;
						}
						const _next = document.createElement("div");
						const _prev = document.createElement("div");
						_next.className = "z-next";
						_prev.className = "z-prev";
						_next.innerHTML = `<i class="zero-icon zerod-next">`;
						_prev.innerHTML = `<i class="zero-icon zerod-prev">`;
						_container.appendChild(_next);</i></i>

* @create date 2019-02-24 17:06:10
 * @modify date 2019-02-24 17:06:10
 * @desc [description]
 */
import { Icon, Modal } from 'antd';
import * as React from 'react';
import RequestFiles from 'utils/RequestFiles';
import Viewer from 'viewerjs';
import './toImg.less';
interface IAppProps {
    fileID: String;
    hideDownload?: boolean;
    style?: React.CSSProperties;
}
const img = new Image();
const viewer = new Viewer(img)
/**
 * 控制组件 展示
 */
export class ToImg extends React.Component {
    componentDidMount() {

    }
    componentWillUnmount() {

    }
    render() {
        if (this.props.fileID) {
            const src = RequestFiles.onFileUrl(this.props.fileID)
            return <div>
                <div>
                    <div></div></div></div>

install (Vue, {name = 'viewer', debug = false, defaultOptions} = {}) {
    Viewer.setDefaults(defaultOptions)

    Vue.component(name, extend(Component, { name }))
    Vue.use(directive, {name, debug})
  },
  setDefaults (defaultOptions) {

setDefaults (defaultOptions) {
    Viewer.setDefaults(defaultOptions)
  }
}