dykj-outsource-12123/uni_modules/uview-plus/components/u-status-bar/u-status-bar.vue
2024-06-28 14:18:30 +08:00

50 lines
1.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view
:style="[style]"
class="u-status-bar"
>
<slot />
</view>
</template>
<script>
import props from './props';
import mpMixin from '../../libs/mixin/mpMixin';
import mixin from '../../libs/mixin/mixin';
import { addUnit, addStyle, deepMerge, sys } from '../../libs/function/index';
/**
* StatbusBar 状态栏占位
* @description 本组件主要用于状态填充,比如在自定导航栏的时候,它会自动适配一个恰当的状态栏高度。
* @tutorial https://uview-plus.jiangruyi.com/components/statusBar.html
* @property {String} bgColor 背景色 (默认 'transparent' )
* @property {String | Object} customStyle 自定义样式
* @example <u-status-bar></u-status-bar>
*/
export default {
name: 'u-status-bar',
mixins: [mpMixin, mixin, props],
data() {
return {
}
},
computed: {
style() {
const style = {}
// 状态栏高度由于某些安卓和微信开发工具无法识别css的顶部状态栏变量所以使用js获取的方式
style.height = addUnit(sys().statusBarHeight, 'px')
style.backgroundColor = this.bgColor
return deepMerge(style, addStyle(this.customStyle))
}
},
}
</script>
<style lang="scss" scoped>
.u-status-bar {
// nvue会默认100%如果nvue下显式写100%的话会导致宽度不为100%而异常
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
}
</style>