<template>
<article class="ion-app" :version="version" :id="mode"
:style="styleObj"
:class="[mode,modeClass,platformClass,{'disable-hover':disableHover},{'disable-scroll':disableScroll}]">
<section class="app-root">
<slot></slot>
</section>
<aside id="modalPortal"></aside>
<aside id="sheetPortal"></aside>
<aside id="alertPortal"></aside>
<aside id="loadingPortal"></aside>
<aside id="toastPortal"></aside>
<aside class="click-block"
:class="[{'click-block-enabled':isClickBlockEnabled,'click-block-active':isClickBlockActive}]"></aside>
<slot name="outer"></slot>
</article>
</template>
<style lang="scss" src="./style.scss"></style>
<script type="text/javascript">
import { setElementClass } from '../../util/util'
import { isPresent, isString } from '../../util/type'
import disableHover from '../../util/disable-hover'
import modeMixins from '../../util/mode-mixins.js'
const CLICK_BLOCK_BUFFER_IN_MILLIS = 64 // 等待业务完毕的额外时间
const CLICK_BLOCK_DURATION_IN_MILLIS = 700 // 时间过后回复可点击状态
export default {
name: 'App',
mixins: [modeMixins],
provide () {
let _this = this
return {
appComponent: _this
}
},
data () {
return {
disableHover: disableHover, // 禁用计时
isScrollDisabled: false, // 控制页面是否能滚动
disableScroll: false,
isClickBlockEnabled: false, // 控制是否能点击 click-block-enabled
isClickBlockActive: false, // 控制是否激活 '冷冻'效果 click-block-active
clickBlockTimer: null,
disableScrollTimer: null,
isScrolling: false, // 可滚动状态
isEnabled: true, // 可点击状态
scrollTop: 0, // 记录scrollTop, 用于disable scroll
styleObj: {},
version: isPresent(window.VM) && window.VM.version
}
},
computed: {
platformClass () {
return `platform-${this.mode}`
}
},
methods: {
/**
* @function setEnabled
* @description
* 设置当前页面是否能点击滑动, 一般使用在像ActionSheet/Alert/Modal等弹出会出现transition动画,
* 当transition动画进行中，页面是锁定的不能点击，因此使用该函数设定App的状态, 保证动画过程中, 用户不会操作页面
* @param {boolean} isEnabled - `true` for enabled, `false` for disabled
* @param {number} duration - isEnabled=false的过期时间 当 `isEnabled` 设置为`false`, 则duration之后，`isEnabled`将自动设为`true`
*
* @example
* this.$app && this.$app.setEnabled(false, 400) -> 400ms内页面不可点击, 400ms过后可正常使用
* this.$app && this.$app.setEnabled(true) -> 64ms后解除锁定
* */
setEnabled (isEnabled, duration = CLICK_BLOCK_DURATION_IN_MILLIS) {
if (isEnabled) {
// 解锁
if (this.isClickBlockActive) {
this.timer && window.clearTimeout(this.timer)
this.timer = window.setTimeout(() => {
this.isClickBlockActive = false
this.isEnabled = true
}, CLICK_BLOCK_BUFFER_IN_MILLIS)
} else {
this.isEnabled = true
}
} else {
// 枷锁
this.isEnabled = false
this.isClickBlockActive = true
this.timer && window.clearTimeout(this.timer)
this.timer = window.setTimeout(() => {
this.isClickBlockActive = false
this.isEnabled = true
}, duration + CLICK_BLOCK_BUFFER_IN_MILLIS)
}
},
/**
* @function setDisableScroll
* @description
* 是否点击滚动, 这个需要自己设置时间解锁
* @param {Boolean} isScrollDisabled - 是否禁止滚动点击 true:禁止滚动/false:可以滚动
* @param {number} duration - 时间过后则自动解锁
* @example
* this.$app && this.$app.setDisableScroll(true) -> 页面不可滚动
* this.$app && this.$app.setDisableScroll(true, 400) -> 400ms内页面不可滚动, 400ms过后可正常使用
* this.$app && this.$app.setDisableScroll(false) ->立即解除锁定
* */
setDisableScroll (isScrollDisabled, duration = 0) {
if (isScrollDisabled) {
// duration ms内页面不可滚动, duration ms过后可正常使用
this.$_disableScroll()
if (duration > 0) {
this.disableScrollTimer && window.clearTimeout(this.disableScrollTimer)
this.disableScrollTimer = window.setTimeout(() => {
this.$_enableScroll()
}, duration)
}
} else {
// 立即解除锁定
this.$_enableScroll()
}
},
/**
* @function setClass
* @description
* 设置根组件的class样式, 比如全局颜色替换或者结构变更
* @param {string} className - 样式名称
* @param {boolean} [isAdd=false] - 是否添加
*/
setClass (className, isAdd = false) {
if (className) {
setElementClass(this.$el, className, isAdd)
}
},
/**
* @function setDocTitle
* @param {String|Object} _title - 设置标题
* @param {String} _title.title - 标题
* @description
* 设置document.title的值, 如果传入的是string, 则为title的字符串, 如果是对象, 则title字段为标题名称
* */
setDocTitle (_title) {
if (isString(_title)) {
_title = {title: _title}
}
// BugFixed: 如果组件不是通过异步加载, 则他的执行顺序会很靠前, 此时平台的方法并未初始化完毕. 因此异步定时后在执行
window.setTimeout(() => {
let isHandled = !!this.$platform && !!this.$platform.setNavbarTitle && this.$platform.setNavbarTitle(_title)
if (!isHandled) {
document.title = _title.title || ''
}
}, 16 * 5)
},
/**
* @param {Boolean} shouldShow
* @param {Number} [expire=100]
* @return {Promise}
* @private
* */
$_activate (shouldShow, expire = 100) {
return new Promise((resolve) => {
if (this.isEnabled !== shouldShow) {
this.isEnabled = shouldShow
window.setTimeout(() => {
this.isEnabled = false
}, expire)
} else {
resolve()
}
})
},
/**
* @private
* */
$_disableScroll () {
if (!this.isScrollDisabled) {
this.$root.$emit('app:disableScroll')
this.scrollTop = 0
this.styleObj = {}
this.isScrollDisabled = true
// 如果页面高度小于窗口高度, 则不进行限制(限制没意义)
let windowHeight = window.innerHeight
let docHeight = window.document.documentElement.offsetHeight
if (windowHeight >= docHeight) {
this.disableScroll = false
// `窗口高度:${windowHeight}, 页面高度: ${docHeight}, 当前情况setDisableScroll不生效.`
} else {
this.disableScroll = true
this.scrollTop = window.scrollY
this.styleObj = {
top: -this.scrollTop + 'px'
}
}
}
},
/**
* @private
* */
$_enableScroll () {
if (this.isScrollDisabled) {
this.$root.$emit('app:enableScroll')
this.isScrollDisabled = false
this.disableScroll = false
this.$nextTick(() => {
// scrollTop lost after set position:fixed, restore it back.
let windowHeight = window.innerHeight
let docHeight = window.document.documentElement.offsetHeight
if (windowHeight < docHeight && this.scrollTop > 0) {
window.scrollTo(0, this.scrollTop)
}
})
}
}
},
created () {
// eslint-disable-next-line no-proto
let proto = this.__proto__.__proto__
proto.$app = this
proto.$root = this.$root
this.$root.$on('onScrollStart', () => {
this.isScrolling = true
})
this.$root.$on('onScroll', () => {
this.isScrolling = true
})
this.$root.$on('onScrollEnd', () => {
this.isScrolling = false
})
this.$root.$emit('app:created', this)
},
mounted () {
// 设置当前可点击
this.isClickBlockEnabled = true
// for debug
if (window.VM) {
window.VM.$app = this
window.VM.$root = this.$root
}
this.$root.$emit('app:mounted', this)
}
}
</script>