65 lines
1.4 KiB
Vue
65 lines
1.4 KiB
Vue
<template>
|
||
<view
|
||
:style="$u.toStyle(style, customStyle)"
|
||
:class="['u-status-bar', { 'safe-area-inset-top': noBar }, customClass]"
|
||
>
|
||
<slot />
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
export default {
|
||
name: 'u-status-bar',
|
||
options: {
|
||
addGlobalClass: true,
|
||
// #ifndef MP-TOUTIAO
|
||
virtualHost: true,
|
||
// #endif
|
||
styleIsolation: 'shared'
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, type CSSProperties } from 'vue';
|
||
import { StatusBarProps } from './props';
|
||
import { $u } from '../../';
|
||
|
||
/**
|
||
* StatusBar 状态栏
|
||
* @property {String | Object} customStyle 自定义样式
|
||
* @property {String} background 背景颜色
|
||
* @example <u-status-bar></u-status-bar>
|
||
*/
|
||
const props = defineProps(StatusBarProps);
|
||
const noBar = ref(false);
|
||
|
||
const style = computed(() => {
|
||
let result: CSSProperties = {
|
||
background: props.background
|
||
};
|
||
const statusBarHeight = $u.sys().statusBarHeight;
|
||
if (statusBarHeight === 0) {
|
||
noBar.value = true;
|
||
} else {
|
||
result.height = $u.addUnit(statusBarHeight, 'px');
|
||
}
|
||
return result;
|
||
});
|
||
|
||
onMounted(() => {
|
||
// #ifdef H5
|
||
noBar.value = true;
|
||
// #endif
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.u-status-bar {
|
||
/* #ifndef APP-NVUE */
|
||
/* nvue会默认100%，如果nvue下，显式写100%的话，会导致宽度不为100%而异常 */
|
||
width: 100%;
|
||
/* #endif */
|
||
}
|
||
</style>
|