index.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <uni-shadow-root class="weapp-lib-tabbar-index"><view :class="(border ? 'van-hairline--top-bottom' : '')+' '+(utils.bem('tabbar', { fixed, safe: safeAreaInsetBottom }))+' custom-class'" :style="zIndex ? 'z-index: ' + zIndex : ''">
  3. <slot></slot>
  4. </view>
  5. <view v-if="fixed && placeholder" :style="'height: '+(height)+'px;'"></view></uni-shadow-root>
  6. </template>
  7. <wxs src="../wxs/utils.wxs" module="utils"></wxs>
  8. <script>
  9. global['__wxRoute'] = 'weapp/lib/tabbar/index'
  10. "use strict";
  11. Object.defineProperty(exports, "__esModule", { value: true });
  12. var component_1 = require("../common/component");
  13. var relation_1 = require("../common/relation");
  14. var utils_1 = require("../common/utils");
  15. (0, component_1.VantComponent)({
  16. relation: (0, relation_1.useChildren)('tabbar-item', function () {
  17. this.updateChildren();
  18. }),
  19. props: {
  20. active: {
  21. type: null,
  22. observer: 'updateChildren',
  23. },
  24. activeColor: {
  25. type: String,
  26. observer: 'updateChildren',
  27. },
  28. inactiveColor: {
  29. type: String,
  30. observer: 'updateChildren',
  31. },
  32. fixed: {
  33. type: Boolean,
  34. value: true,
  35. observer: 'setHeight',
  36. },
  37. placeholder: {
  38. type: Boolean,
  39. observer: 'setHeight',
  40. },
  41. border: {
  42. type: Boolean,
  43. value: true,
  44. },
  45. zIndex: {
  46. type: Number,
  47. value: 1,
  48. },
  49. safeAreaInsetBottom: {
  50. type: Boolean,
  51. value: true,
  52. },
  53. },
  54. data: {
  55. height: 50,
  56. },
  57. methods: {
  58. updateChildren: function () {
  59. var children = this.children;
  60. if (!Array.isArray(children) || !children.length) {
  61. return;
  62. }
  63. children.forEach(function (child) { return child.updateFromParent(); });
  64. },
  65. setHeight: function () {
  66. var _this = this;
  67. if (!this.data.fixed || !this.data.placeholder) {
  68. return;
  69. }
  70. wx.nextTick(function () {
  71. (0, utils_1.getRect)(_this, '.van-tabbar').then(function (res) {
  72. _this.setData({ height: res.height });
  73. });
  74. });
  75. },
  76. },
  77. });
  78. export default global['__wxComponents']['weapp/lib/tabbar/index']
  79. </script>
  80. <style platform="mp-weixin">
  81. @import '../common/index.css';.van-tabbar{background-color:var(--tabbar-background-color,#fff);box-sizing:initial;display:flex;height:var(--tabbar-height,50px);width:100%}.van-tabbar--fixed{bottom:0;left:0;position:fixed}.van-tabbar--safe{padding-bottom:env(safe-area-inset-bottom)}
  82. </style>