u-safe-bottom.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <view
  3. class="u-safe-bottom"
  4. :style="[style]"
  5. :class="[!isNvue && 'u-safe-area-inset-bottom']"
  6. >
  7. </view>
  8. </template>
  9. <script>
  10. import props from "./props.js";
  11. /**
  12. * SafeBottom 底部安全区
  13. * @description 这个适配,主要是针对IPhone X等一些底部带指示条的机型,指示条的操作区域与页面底部存在重合,容易导致用户误操作,因此我们需要针对这些机型进行底部安全区适配。
  14. * @tutorial https://www.uviewui.com/components/safeAreaInset.html
  15. * @property {type} prop_name
  16. * @property {Object} customStyle 定义需要用到的外部样式
  17. *
  18. * @event {Function()}
  19. * @example <u-status-bar></u-status-bar>
  20. */
  21. export default {
  22. name: "u-safe-bottom",
  23. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  24. data() {
  25. return {
  26. safeAreaBottomHeight: 0,
  27. isNvue: false,
  28. };
  29. },
  30. computed: {
  31. style() {
  32. const style = {};
  33. // #ifdef APP-NVUE
  34. // nvue下,高度使用js计算填充
  35. style.height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
  36. // #endif
  37. return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
  38. },
  39. },
  40. mounted() {
  41. // #ifdef APP-NVUE
  42. // 标识为是否nvue
  43. this.isNvue = true;
  44. // #endif
  45. },
  46. };
  47. </script>
  48. <style lang="scss" scoped>
  49. .u-safe-bottom {
  50. /* #ifndef APP-NVUE */
  51. width: 100%;
  52. /* #endif */
  53. }
  54. </style>