init

uni_modules/nutui-uni/components/safearea/index.scss

@@ -0,0 +1,15 @@
+.nut-safe-area {
+  display: block;
+  width: 100%;
+
+  &-position-top {
+    padding-top: calc(var(--status-bar-height) * var(--nutui-safe-area-multiple, 1));
+    padding-top: calc(constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1));
+    padding-top: calc(env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1));
+  }
+
+  &-position-bottom {
+    padding-bottom: calc(constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1));
+    padding-bottom: calc(env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1));
+  }
+}

uni_modules/nutui-uni/components/safearea/index.ts

@@ -0,0 +1 @@
+export * from './safearea'

uni_modules/nutui-uni/components/safearea/safearea.ts

@@ -0,0 +1,12 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { commonProps } from '../_utils'
+
+export const safeareaProps = {
+  ...commonProps,
+  /**
+   * @description 安全区的位置
+   */
+  position: String as PropType<'top' | 'bottom'>,
+}
+
+export type SafeAreaProps = ExtractPropTypes<typeof safeareaProps>

uni_modules/nutui-uni/components/safearea/safearea.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, defineComponent } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass } from '../_utils'
+import { safeareaProps } from './safearea'
+
+const props = defineProps(safeareaProps)
+
+const classes = computed(() => {
+  return getMainClass(props, componentName, [
+    `${componentName}-position-${props.position}`,
+  ])
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-safe-area`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="customStyle" />
+</template>
+
+<style lang="scss">
+@import './index';
+</style>