# vue2 - 图片预览指令

# 1. 说明

原理:

  1. 插入父节点时,初始化
  2. 指令与绑定的元素解绑时,销毁

# 2. 示例

import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';

export default function install(Vue) {
  Vue.directive('imagePreview', {
    inserted(element) {
      element.imageViewerIns = new Viewer(element);
    },

    unbind(element) {
      element.imageViewerIns.destroy();
    },
  });
}
本章目录