You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.4 KiB
56 lines
1.4 KiB
<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>
|
|
|