loading/index.js

  1. /**
  2.  * @component Loading
  3.  * @description
  4.  *
  5.  * ## 弹出层 / Loading组件
  6.  *
  7.  * - Loading通过present开启, 如果没设置duration, 则需要手动dismiss,
  8.  * - Vimo的弹出层都是独立于页面的, 但也不是`body`的直接子元素, 而是挂载在App组件中的. 这样做是有考量的.
  9.  * - 组件相应路由切换, 路由切换则自动关闭
  10.  *
  11.  * ### 用法
  12.  *
  13.  * - 不传参数则显示菊花
  14.  * - 传入string则显示string
  15.  * - 参考下面的示例
  16.  *
  17.  *
  18.  * @props {string} [spinner='ios'] - 菊花样式
  19.  * @props {string} [content] - 内容
  20.  * @props {string} [cssClass] - 自定义样式
  21.  * @props {boolean} [showBackdrop=false] - 是否显示黑色背景
  22.  * @props {number} [duration] - loading持续时间, 如果为0则无效
  23.  * @props {boolean} [dismissOnPageChange=true] - 页面切换是否关闭loading
  24.  * @props {string} [mode='ios'] - 模式
  25.  *
  26.  * @demo #/loading
  27.  * @see component:Indicator
  28.  * @usage
  29.  *
  30.  * // 只显示菊花
  31.  * spinnerOnly () {
  32.  *      this.$loading.present();
  33.  *      setTimeout(() => {
  34.  *        this.$loading.dismiss().then(() => {
  35.  *          console.debug('dismiss in promise success!')
  36.  *        })
  37.  *      }, 1000)
  38.  * },
  39.  *
  40.  * // 是显示name
  41.  * stringOnly () {
  42.  *      this.$loading.present('只传入了String');
  43.  *      setTimeout(() => {
  44.  *        this.$loading.dismiss().then(() => {
  45.  *          console.debug('dismiss in promise success!')
  46.  *        })
  47.  *      }, 1000)
  48.  * },
  49.  *
  50.  * // 普通的
  51.  * showDefault () {
  52.  *      this.$loading.present({
  53.  *        content: '正在加载, 6000ms后自动关闭...',
  54.  *        dismissOnPageChange: false, // url变化后关闭loading(默认)
  55.  *        showBackdrop: true,
  56.  *      });
  57.  *      setTimeout(() => {
  58.  *        this.$loading.dismiss().then(() => {
  59.  *          console.debug('dismiss in promise success!')
  60.  *        })
  61.  *      }, 6000);
  62.  * },
  63.  *
  64.  */
  65. import { isString } from '../../util/util'
  66. import LoadingComponent from './loading.vue'
  67. import GeneratePopUpInstance from '../../util/generatePopUpInstance.js'
  69. class LoadingInstance extends GeneratePopUpInstance {
  70.   normalizeOptions (options = {}) {
  71.     if (isString(options)) {
  72.       options = {content: options}
  73.     }
  74.     options.scrollControl = false
  75.     return options
  76.   }
  78.   isPresentHandled (options) {
  79.     return (!!options && !options.isH5) &&
  80.       window.VM &&
  81.       window.VM.platform &&
  82.       window.VM.platform.showLoading &&
  83.       window.VM.platform.showLoading(options)
  84.   }
  86.   isDismissHandled () {
  87.     return window.VM &&
  88.       window.VM.platform &&
  89.       window.VM.platform.hideLoading &&
  90.       window.VM.platform.hideLoading()
  91.   }
  92. }
  94. export default new LoadingInstance(LoadingComponent, 'loading-portal')