56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
|
<template>
|
|||
|
|
<view
|
|||
|
|
class="u-safe-bottom"
|
|||
|
|
:style="$u.toStyle(style, customStyle)"
|
|||
|
|
:class="[!isNVue && 'safe-area-inset-bottom', customClass]"
|
|||
|
|
></view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
export default {
|
|||
|
|
name: 'u-safe-bottom',
|
|||
|
|
options: {
|
|||
|
|
addGlobalClass: true,
|
|||
|
|
// #ifndef MP-TOUTIAO
|
|||
|
|
virtualHost: true,
|
|||
|
|
// #endif
|
|||
|
|
styleIsolation: 'shared'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, computed, onMounted, type CSSProperties } from 'vue';
|
|||
|
|
import { SafeBottomProps } from './props';
|
|||
|
|
import { $u } from '../../';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* SafeBottom 底部安全区
|
|||
|
|
* @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
|
|||
|
|
* @property {String | Object} customStyle 自定义样式
|
|||
|
|
* @example <u-safe-bottom></u-safe-bottom>
|
|||
|
|
*/
|
|||
|
|
const props = defineProps(SafeBottomProps);
|
|||
|
|
|
|||
|
|
const isNVue = ref(false);
|
|||
|
|
|
|||
|
|
const style = computed(() => {
|
|||
|
|
let result: CSSProperties = {};
|
|||
|
|
// #ifdef APP-NVUE || MP-TOUTIAO
|
|||
|
|
// nvue下，高度使用js计算填充
|
|||
|
|
const safeAreaInsets = $u.sys()?.safeAreaInsets;
|
|||
|
|
if (safeAreaInsets?.bottom) {
|
|||
|
|
result.height = $u.addUnit(safeAreaInsets.bottom, 'px');
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
return result;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
// 标识为是否nvue
|
|||
|
|
isNVue.value = true;
|
|||
|
|
// #endif
|
|||
|
|
});
|
|||
|
|
</script>
|