automated_uniapp/uni_modules/cool-ui/components/cl-status-bar/cl-status-bar.vue
2025-01-09 16:16:11 +08:00

65 lines
1.0 KiB
Vue

<template>
<view
class="cl-status-bar__wrap"
:class="[
{
'is-sticky': sticky,
},
]"
:style="{
height,
}"
>
<view
class="cl-status-bar"
:style="{
backgroundColor,
}"
></view>
</view>
</template>
<script lang="ts">
import { computed, defineComponent } from "vue";
import { useCool } from "/@/cool";
export default defineComponent({
name: "cl-status-bar",
props: {
// 背景颜色
backgroundColor: String,
// 是否吸顶
sticky: {
type: Boolean,
default: true,
},
},
setup(props) {
const { statusBarHeight } = uni.getSystemInfoSync();
const { router } = useCool();
// 状态栏高度
const height = computed(() => {
return `${statusBarHeight}px`;
});
// 背景色
const backgroundColor = computed(() => {
return (
props.backgroundColor ||
router.info()?.style?.navigationBarBackgroundColor ||
router.globalStyle?.navigationBarBackgroundColor ||
"#ffffff"
);
});
return {
height,
backgroundColor,
};
},
});
</script>