safe-area-adapter-vue2

Vue 2 组件，用于处理移动设备底部安全区域适配。

特点

• 自动适配移动设备底部安全区域
• 支持自定义安全区域高度
• 支持全局注册和组件内引入两种使用方式

安装

npm install safe-area-adapter-vue2

使用方法

全局注册

在你的入口文件（通常是 main.js）中：

import Vue from 'vue';
import SafeAreaAdapter from 'safe-area-adapter-vue2';
import 'safe-area-adapter-vue2/index.css'; // 导入样式

Vue.use(SafeAreaAdapter);

组件内引入

import { SafeAreaAdapter } from 'safe-area-adapter-vue2';
import 'safe-area-adapter-vue2/index.css'; // 导入样式

export default {
  components: {
    SafeAreaAdapter
  }
};

基本用法

<template>
  <div class="container">
    <div class="content">
      <!-- 你的页面内容 -->
    </div>

    <SafeAreaAdapter>
      <div class="footer">
        <!-- 底部区域，会自动添加安全区域适配 -->
      </div>
    </SafeAreaAdapter>
  </div>
</template>

属性

| 属性名 | 类型 | 默认值 | 描述 | | -------------- | ------------- | ------ | -------------------------------- | | safeAreaHeight | Number/String | null | 自定义安全区域高度（像素） | | enabled | Boolean | true | 是否启用安全区域适配 | | defaultHeight | Number/String | 25 | 默认安全区域高度（像素） | | fixPositionedChildren | Boolean | true | 是否自动修复父元素内的定位元素 | | createOverlay | Boolean | true | 是否添加遮罩层 | | overlayZIndex | Number/String | 9999 | 遮罩层的z-index | | overlayBackground | String | '#000' | 遮罩层背景色 |

安全区域高度获取优先级

组件会按照以下优先级获取安全区域高度：

1. 组件属性 safeAreaHeight
2. UserAgent 中的 bheight 参数
3. URL 参数中的 safeAreaHeight
4. iOS 设备上的 CSS 环境变量 env(safe-area-inset-bottom)
5. 默认高度 defaultHeight

注意事项

• 该组件仅支持 Vue 2.x 版本
• 组件会自动处理横竖屏切换时的安全区域高度变化

特殊情况

当 URL 参数中 hideBottom=1 时，不会添加安全区域适配。

示例

使用内边距（默认）

<SafeAreaAdapter>
  <div class="footer">底部内容</div>
</SafeAreaAdapter>

使用外边距

<SafeAreaAdapter :usePadding="false">
  <div class="footer">底部内容</div>
</SafeAreaAdapter>

自定义安全区域高度

<SafeAreaAdapter :safeAreaHeight="40">
  <div class="footer">底部内容</div>
</SafeAreaAdapter>

禁用安全区域适配

<SafeAreaAdapter :enabled="false">
  <div class="footer">底部内容</div>
</SafeAreaAdapter>

开发

# 安装依赖
npm install

# 运行示例
npm run dev

# 构建库
npm run build

许可

MIT