hevue-img-preview/v2/index.js

> 本组件是一个基于 vue 编写的 vue 图片预览组件，支持 pc 和手机端，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果。手机端支持单指拖拽和双指缩放。页面各组件颜色均可可自定义，实现个性化设计，如果能帮上你，希望可以移步 [GitHub](https://github.com/heyongsheng/hevue-img-preview) ，或者[码云](https://gitee.com/ihope_top/hevue-img-preview) 给个小星星，如果有任何使用意见或建议

import Preview from '../hevue-img-preview.vue'
import Vue from 'vue'

// 全局配置
let hevueImgPreviewConfig = {}
export function previewImages(options) {
  if (typeof options === 'string') {
    options = {
      imgList: [options],
    }
  } else if (Array.isArray(options)) {
    options = {
      imgList: options,
    }
  }

  // 优先采取局部配置，其次采取全局配置
  Object.keys(hevueImgPreviewConfig).forEach((name) => {
    if (options[name] === undefined) {
      options[name] = hevueImgPreviewConfig[name]
    }
  })

  const old = document.getElementById('hevue-img-preview-container')
  if (old) old.remove()

  const container = document.createElement('div')
  container.id = 'hevue-img-preview-container'
  // 如果用户传入了 zIndex，则使用用户传入的 zIndex，否则使用默认值
  container.style.zIndex = options.zIndex || '9999'
  document.body.appendChild(container)

  const app = Vue.extend(Preview)
  const instance = new app({
    data: options,
  })
  instance.$mount(container)
  document.body.appendChild(container)

  instance.show()
  return instance
}

export default {
  install(app, opts = {}) {
    hevueImgPreviewConfig = opts
    app.prototype.$hevueImgPreview = previewImages
  },
}