uni-status-bar.vue 532 B

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