dykj-football/uni_modules/uview-plus/components/u-safe-bottom/u-safe-bottom.vue
2024-04-17 15:27:43 +08:00

60 lines
1.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view
class="u-safe-bottom"
:style="[style]"
:class="[!isNvue && 'u-safe-area-inset-bottom']"
>
</view>
</template>
<script>
import props from "./props.js";
import mpMixin from '../../libs/mixin/mpMixin';
import mixin from '../../libs/mixin/mixin';
import { addStyle, deepMerge, addUnit, sys } from '../../libs/function/index';
/**
* SafeBottom 底部安全区
* @description 这个适配主要是针对IPhone X等一些底部带指示条的机型指示条的操作区域与页面底部存在重合容易导致用户误操作因此我们需要针对这些机型进行底部安全区适配。
* @tutorial https://ijry.github.io/uview-plus/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: [mpMixin, mixin, props],
data() {
return {
safeAreaBottomHeight: 0,
isNvue: false,
};
},
computed: {
style() {
const style = {};
// #ifdef APP-NVUE || MP-TOUTIAO
// nvue下高度使用js计算填充
style.height = addUnit(sys().safeAreaInsets.bottom, 'px');
// #endif
return deepMerge(style, 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>