uni-status-bar.vue 540 B

12345678910111213141516171819202122232425262728293031
  1. <template>
  2. <view :style="{ height: statusBarHeight,backgroundColor: bgColor }" class="uni-status-bar">
  3. <slot />
  4. </view>
  5. </template>
  6. <script>
  7. var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
  8. export default {
  9. name: 'UniStatusBar',
  10. data() {
  11. return {
  12. statusBarHeight: statusBarHeight
  13. }
  14. },
  15. props:{
  16. bgColor: {
  17. type: String,
  18. default: ""
  19. }
  20. },
  21. }
  22. </script>
  23. <style lang="scss" scoped>
  24. .uni-status-bar {
  25. width: 750rpx;
  26. height: 20px;
  27. // height: var(--status-bar-height);
  28. }
  29. </style>