preview-image/index.js

  1. /**
  2.  * @component PreviewImage
  3.  * @description
  4.  *
  5.  * ## 图片组件 / PreviewImage组件
  6.  *
  7.  * ### 简介
  8.  *
  9.  * 点击图片显示预览效果
  10.  *
  11.  * ### 其他
  12.  *
  13.  * 如果是在支付宝环境，则使用支付宝的组件, 前提是
  14.  *
  15.  * @usage
  16.  *
  17.  * @props {Number} [current=0]     - 当前index
  18.  * @props {Array} [urls]           - 图片链接
  19.  * @props {Array} [isH5=false]     - 是否使用h5组件, false为自动, true为强制使用h5组件(isForceH5)
  20.  *
  21.  * @demo #/preview-image
  22.  * @usage
  23.  * import { PreviewImage } from 'vimo'
  24.  * function openAlbum1 () {
  25.  *    PreviewImage.present({
  26.  *      current: 0,
  27.  *      urls: [
  28.  *        'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
  29.  *        'https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg',
  30.  *        'https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg'
  31.  *      ]
  32.  *    })
  33.  *  }
  34.  * */
  35. import PreviewImageComponent from './preview-image.vue'
  36. import GeneratePopUpInstance from '../../util/GeneratePopUpInstance.js'
  38. class PreviewImageInstance extends GeneratePopUpInstance {
  39.   normalizeOptions (options) {
  40.     options.recordInHistory = true
  41.     return options
  42.   }
  44.   isPresentHandled (options) {
  45.     return !options.isH5 &&
  46.       window.VM &&
  47.       window.VM.platform &&
  48.       window.VM.platform.previewImage &&
  49.       window.VM.platform.previewImage(options)
  50.   }
  51. }
  53. export default new PreviewImageInstance(PreviewImageComponent, 'modalPortal')