看板

2026-03-25 14:54:15 +08:00
commit ab4646b43a
827 changed files with 123812 additions and 0 deletions
@@ -0,0 +1,13 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+export const StatusBarProps = {
+    ...baseProps,
+    /** 背景设置 */
+    background: {
+        type: String,
+        default: 'transparent'
+    }
+};
+
+export type StatusBarProps = ExtractPropTypes<typeof StatusBarProps>;
@@ -0,0 +1,64 @@
+<template>
+    <view
+        :style="$u.toStyle(style, customStyle)"
+        :class="['u-status-bar', { 'safe-area-inset-top': noBar }, customClass]"
+    >
+        <slot />
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-status-bar',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, type CSSProperties } from 'vue';
+import { StatusBarProps } from './props';
+import { $u } from '../../';
+
+/**
+ * StatusBar 状态栏
+ * @property {String | Object} customStyle 自定义样式
+ * @property {String} background 背景颜色
+ * @example <u-status-bar></u-status-bar>
+ */
+const props = defineProps(StatusBarProps);
+const noBar = ref(false);
+
+const style = computed(() => {
+    let result: CSSProperties = {
+        background: props.background
+    };
+    const statusBarHeight = $u.sys().statusBarHeight;
+    if (statusBarHeight === 0) {
+        noBar.value = true;
+    } else {
+        result.height = $u.addUnit(statusBarHeight, 'px');
+    }
+    return result;
+});
+
+onMounted(() => {
+    // #ifdef H5
+    noBar.value = true;
+    // #endif
+});
+</script>
+
+<style scoped>
+.u-status-bar {
+    /* #ifndef APP-NVUE */
+    /* nvue会默认100%，如果nvue下，显式写100%的话，会导致宽度不为100%而异常 */
+    width: 100%;
+    /* #endif */
+}
+</style>