<template> <view class="u-safe-bottom" :style="[style]" :class="[!isNvue && 'u-safe-area-inset-bottom']" > </view> </template> <script> import props from "./props.js"; /** * SafeBottom 底部安全区 * @description 这个适配,主要是针对IPhone X等一些底部带指示条的机型,指示条的操作区域与页面底部存在重合,容易导致用户误操作,因此我们需要针对这些机型进行底部安全区适配。 * @tutorial https://www.uviewui.com/components/safeAreaInset.html * @property {type} prop_name * @property {Object} customStyle 定义需要用到的外部样式 * * @event {Function()} * @example <u-status-bar></u-status-bar> */ export default { name: "u-safe-bottom", mixins: [uni.$u.mpMixin, uni.$u.mixin, props], data() { return { safeAreaBottomHeight: 0, isNvue: false, }; }, computed: { style() { const style = {}; // #ifdef APP-NVUE // nvue下,高度使用js计算填充 style.height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px'); // #endif return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)); }, }, mounted() { // #ifdef APP-NVUE // 标识为是否nvue this.isNvue = true; // #endif }, }; </script> <style lang="scss" scoped> .u-safe-bottom { /* #ifndef APP-NVUE */ width: 100%; /* #endif */ } </style>