dati/components/uni-status-bar/uni-status-bar.vue

<template>
  <view
    :style="{ height: statusBarHeight }"
    class="uni-status-bar"><slot/></view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
export default {
  name: 'UniStatusBar',
  data () {
    return {
      statusBarHeight: statusBarHeight
    }
  }
}
</script>

<style>
.uni-status-bar {
	display: block;
	width: 100%;
	height: 20px;
	height: var(--status-bar-height);
}
</style>