提交 1b4d1705 编写于 作者: fxy060608's avatar fxy060608

feat: add updateCssVar

上级 a9482721
export * from './util'
export * from './icon'
export * from './getRealRoute'
export * from './updateCssVar'
export * from './getWindowOffset'
interface PageCssVars {
'--window-top'?: string
'--window-bottom'?: string
'--window-left'?: string
'--window-right'?: string
'--window-margin'?: string
'--top-window-height'?: string
}
const style = document.documentElement.style
function updateCssVar(cssVars: Record<string, any>) {
Object.keys(cssVars).forEach((name) => {
style.setProperty(name, cssVars[name])
})
}
export function updatePageCssVar(cssVars: PageCssVars) {
return updateCssVar(cssVars)
}
interface AppCssVar {
'--status-bar-height'?: string
'--tab-bar-height'?: string
}
export function updateAppCssVar(cssVars: AppCssVar) {
return updateCssVar(cssVars)
}
import { App, ComponentPublicInstance } from 'vue'
import { isString } from '@vue/shared'
import { invokeArrayFns } from '@dcloudio/uni-shared'
import { App } from 'vue'
import { initAppConfig } from './appConfig'
import { initSubscribe } from './subscribe'
export * from './page'
export function initService(app: App) {
initAppConfig(app._context.config)
}
export function getCurrentPage() {
const pages = getCurrentPages()
const len = pages.length
if (len) {
return pages[len - 1]
}
}
export function getCurrentPageMeta() {
const page = getCurrentPage()
if (page) {
return page.$page.meta
}
}
export function getCurrentPageId() {
const meta = getCurrentPageMeta()
if (meta) {
return meta.id
}
return -1
}
export function getCurrentPageVm() {
const page = getCurrentPage()
if (page) {
return (page as any).$vm as ComponentPublicInstance
}
}
export function invokeHook(name: string, args?: unknown): unknown
export function invokeHook(id: number, name: string, args?: unknown): unknown
export function invokeHook(
vm: ComponentPublicInstance,
name: string,
args?: unknown
): unknown
export function invokeHook(
vm: ComponentPublicInstance | string | number,
name?: string | unknown,
args?: unknown
) {
if (isString(vm)) {
args = name
name = vm
vm = getCurrentPageVm()!
} else if (typeof vm === 'number') {
const page = getCurrentPages().find((page) => page.$page.id === vm)
if (page) {
vm = (page as any).$vm as ComponentPublicInstance
} else {
vm = getCurrentPageVm() as ComponentPublicInstance
}
}
if (!vm) {
return
}
const hooks = vm.$[name as string]
return hooks && invokeArrayFns(hooks, args)
initSubscribe()
}
import { isString } from '@vue/shared'
import { ComponentPublicInstance } from 'vue'
import { invokeArrayFns } from '@dcloudio/uni-shared'
export function getCurrentPage() {
const pages = getCurrentPages()
const len = pages.length
if (len) {
return pages[len - 1]
}
}
export function getCurrentPageMeta() {
const page = getCurrentPage()
if (page) {
return page.$page.meta
}
}
export function getCurrentPageId() {
const meta = getCurrentPageMeta()
if (meta) {
return meta.id
}
return -1
}
export function getCurrentPageVm() {
const page = getCurrentPage()
if (page) {
return (page as any).$vm as ComponentPublicInstance
}
}
export function invokeHook(name: string, args?: unknown): unknown
export function invokeHook(id: number, name: string, args?: unknown): unknown
export function invokeHook(
vm: ComponentPublicInstance,
name: string,
args?: unknown
): unknown
export function invokeHook(
vm: ComponentPublicInstance | string | number,
name?: string | unknown,
args?: unknown
) {
if (isString(vm)) {
args = name
name = vm
vm = getCurrentPageVm()!
} else if (typeof vm === 'number') {
const page = getCurrentPages().find((page) => page.$page.id === vm)
if (page) {
vm = (page as any).$vm as ComponentPublicInstance
} else {
vm = getCurrentPageVm() as ComponentPublicInstance
}
}
if (!vm) {
return
}
const hooks = vm.$[name as string]
return hooks && invokeArrayFns(hooks, args)
}
import { ComponentPublicInstance } from '@vue/runtime-core'
import { getCurrentPage, invokeHook } from './page'
export function initSubscribe() {
UniServiceJSBridge.on('onAppEnterForeground', () => {})
UniServiceJSBridge.on('onAppEnterBackground', () => {})
UniServiceJSBridge.on('onAppEnterForeground', () => {
const page = getCurrentPage()
const showOptions = {
path: '',
query: {},
}
if (page) {
showOptions.path = page.$page.route
showOptions.query = page.$page.options
}
invokeHook(getApp() as ComponentPublicInstance, 'onShow', showOptions)
invokeHook(page as ComponentPublicInstance, 'onShow')
})
UniServiceJSBridge.on('onAppEnterBackground', () => {
invokeHook(getApp() as ComponentPublicInstance, 'onHide')
invokeHook(getCurrentPage() as ComponentPublicInstance, 'onHide')
})
}
此差异已折叠。
import { watchEffect, computed, defineComponent } from 'vue'
import { watch, watchEffect, computed, defineComponent } from 'vue'
import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router'
import { invokeHook } from '@dcloudio/uni-core'
import { invokeHook, updatePageCssVar } from '@dcloudio/uni-core'
import {
API_ON_TAB_BAR_MID_BUTTON_TAP,
OnTabBarMidButtonTap,
......@@ -8,11 +8,13 @@ import {
import { getRealPath } from '../../../platform'
import { useTabBar } from '../../plugin/state'
import { cssBackdropFilter } from '../../../service/api/base/canIUse'
import { normalizeWindowBottom } from '../../../helpers/cssVar'
export default /*#__PURE__*/ defineComponent({
name: 'TabBar',
setup() {
const tabBar = useTabBar()!
useTabBarCssVar(tabBar)
const onSwitchTab = useSwitchTab(useRoute(), tabBar)
const { style, borderStyle, placeholderStyle } = useTabBarStyle(tabBar)
return () => {
......@@ -30,6 +32,19 @@ export default /*#__PURE__*/ defineComponent({
},
})
function useTabBarCssVar(tabBar: UniApp.TabBarOptions) {
watch(
() => tabBar.shown,
(value) => {
updatePageCssVar({
'--window-bottom': normalizeWindowBottom(
value ? parseInt(tabBar.height!) : 0
),
})
}
)
}
function useSwitchTab(
route: RouteLocationNormalizedLoaded,
tabBar: UniApp.TabBarOptions
......
import { computed, defineComponent, Ref, ref } from 'vue'
import { computed, defineComponent, ref } from 'vue'
import { isArray } from '@vue/shared'
import { Input } from '@dcloudio/uni-components'
import { getRealPath } from '@dcloudio/uni-platform'
......
import { extend, invokeArrayFns } from '@vue/shared'
import { invokeArrayFns } from '@vue/shared'
import {
ComponentInternalInstance,
ComponentPublicInstance,
......@@ -11,11 +11,13 @@ import {
onBeforeDeactivate,
onBeforeMount,
} from 'vue'
import { useRoute } from 'vue-router'
import { useRoute, useRouter } from 'vue-router'
import { parseQuery, decodedQuery } from '@dcloudio/uni-shared'
import { LayoutComponent } from '../..'
import { initApp } from './app'
import { initPage } from './page'
import { usePageMeta } from './provide'
import { updateCurPageCssVar } from '../../helpers/cssVar'
interface SetupComponentOptions {
init: (vm: ComponentPublicInstance) => void
......@@ -36,9 +38,11 @@ export function usePageRoute() {
url.slice(searchPos + 1, hashPos > -1 ? hashPos : url.length)
)
}
const { meta } = __uniRoutes[0]
return {
meta: __uniRoutes[0].meta,
meta,
query: query,
path: '/' + meta.route,
}
}
......@@ -67,6 +71,10 @@ function setupComponent(comp: any, options: SetupComponentOptions) {
return comp
}
function onPageShow(pageMeta: UniApp.PageRouteMeta) {
updateCurPageCssVar(pageMeta)
}
export function setupPage(comp: any) {
return setupComponent(comp, {
init: initPage,
......@@ -77,8 +85,10 @@ export function setupPage(comp: any) {
//初始化时,状态肯定是激活
instance.__isActive = true
}
const pageMeta = usePageMeta()
onBeforeMount(() => {
const { onLoad, onShow } = instance
onPageShow(pageMeta)
onLoad && invokeArrayFns(onLoad, decodedQuery(route.query))
instance.__isVisible = true
onShow && invokeArrayFns(onShow)
......@@ -89,6 +99,7 @@ export function setupPage(comp: any) {
})
onBeforeActivate(() => {
if (!instance.__isVisible) {
onPageShow(pageMeta)
instance.__isVisible = true
const { onShow } = instance
onShow && invokeArrayFns(onShow)
......@@ -111,16 +122,23 @@ export function setupApp(comp: any) {
init: initApp,
setup(instance) {
const route = usePageRoute()
onBeforeMount(() => {
const onLaunch = () => {
const { onLaunch, onShow } = instance
onLaunch &&
invokeArrayFns(onLaunch, {
path: route.meta.route,
query: decodedQuery(route.query),
scene: 1001,
})
onShow && invokeArrayFns(onShow)
})
const path = route.path.substr(1)
const launchOptions = {
path: path || __uniRoutes[0].meta.route,
query: decodedQuery(route.query),
scene: 1001,
}
onLaunch && invokeArrayFns(onLaunch, launchOptions)
onShow && invokeArrayFns(onShow, launchOptions)
}
if (__UNI_FEATURE_PAGES__) {
// 等待ready后,再onLaunch,可以顺利获取到正确的path和query
useRouter().isReady().then(onLaunch)
} else {
onBeforeMount(onLaunch)
}
onMounted(() => {
document.addEventListener('visibilitychange', function () {
if (document.visibilityState === 'visible') {
......
import { NAVBAR_HEIGHT } from '@dcloudio/uni-shared'
import { updatePageCssVar } from '@dcloudio/uni-core'
import { useTabBar } from '../framework/plugin/state'
import { cssEnv, cssConstant } from '../service/api/base/canIUse'
const envMethod = /*#__PURE__*/ (() =>
cssEnv ? 'env' : cssConstant ? 'constant' : '')()
export function updateCurPageCssVar(pageMeta: UniApp.PageRouteMeta) {
let windowTopValue = 0
let windowBottomValue = 0
if (
__UNI_FEATURE_NAVIGATIONBAR__ &&
['default', 'float'].indexOf(pageMeta.navigationBar.type!) > -1
) {
windowTopValue = NAVBAR_HEIGHT
}
if (__UNI_FEATURE_TABBAR__ && pageMeta.isTabBar) {
const tabBar = useTabBar()!
tabBar.shown && (windowBottomValue = parseInt(tabBar.height!))
}
updatePageCssVar({
'--window-top': normalizeWindowBottom(windowTopValue),
'--window-bottom': normalizeWindowBottom(windowBottomValue),
})
}
export function normalizeWindowTop(windowTop: number) {
return envMethod
? `calc(${windowTop}px + ${envMethod}(safe-area-inset-top))`
: `${windowTop}px`
}
export function normalizeWindowBottom(windowBottom: number) {
return envMethod
? `calc(${windowBottom}px + ${envMethod}(safe-area-inset-bottom))`
: `${windowBottom}px`
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册