看板

2026-03-25 14:54:15 +08:00
commit ab4646b43a
827 changed files with 123812 additions and 0 deletions
@@ -0,0 +1,11 @@
+import type { ExtractPropTypes } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * SafeBottomProps SafeBottom 底部安全区
+ */
+export const SafeBottomProps = {
+    ...baseProps
+};
+
+export type SafeBottomProps = ExtractPropTypes<typeof SafeBottomProps>;
@@ -0,0 +1,55 @@
+<template>
+    <view
+        class="u-safe-bottom"
+        :style="$u.toStyle(style, customStyle)"
+        :class="[!isNVue && 'safe-area-inset-bottom', customClass]"
+    ></view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-safe-bottom',
+    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 { SafeBottomProps } from './props';
+import { $u } from '../../';
+
+/**
+ * SafeBottom 底部安全区
+ * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
+ * @property {String | Object} customStyle 自定义样式
+ * @example <u-safe-bottom></u-safe-bottom>
+ */
+const props = defineProps(SafeBottomProps);
+
+const isNVue = ref(false);
+
+const style = computed(() => {
+    let result: CSSProperties = {};
+    // #ifdef APP-NVUE || MP-TOUTIAO
+    // nvue下，高度使用js计算填充
+    const safeAreaInsets = $u.sys()?.safeAreaInsets;
+    if (safeAreaInsets?.bottom) {
+        result.height = $u.addUnit(safeAreaInsets.bottom, 'px');
+    }
+    // #endif
+    return result;
+});
+
+onMounted(() => {
+    // #ifdef APP-NVUE
+    // 标识为是否nvue
+    isNVue.value = true;
+    // #endif
+});
+</script>