学员端小程序
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

1 year ago
  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>