index.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <view
  3. :class="'custom-class ' + (border ? 'van-hairline--top-bottom' : '') + ' ' + utils.bem('tabbar', { fixed, safe: safeAreaInsetBottom })"
  4. :style="zIndex ? 'z-index: ' + zIndex : ''"
  5. >
  6. <slot />
  7. </view>
  8. </template>
  9. <script module="utils" lang="wxs" src="@/node_modules/@vant/weapp/dist/wxs/utils.wxs"></script>
  10. <script>
  11. import { VantComponent } from '../common/component';
  12. export default {
  13. data() {
  14. return {};
  15. },
  16. '../tabbar-item/index': {
  17. name: 'tabbar-item',
  18. type: 'descendant',
  19. current: 'tabbar',
  20. linked(target) {
  21. target.parent = this;
  22. target.updateFromParent();
  23. },
  24. unlinked() {
  25. this.updateChildren();
  26. }
  27. },
  28. props: {
  29. active: {
  30. type: null
  31. },
  32. activeColor: {
  33. type: String
  34. },
  35. inactiveColor: {
  36. type: String
  37. },
  38. fixed: {
  39. type: Boolean,
  40. default: true
  41. },
  42. border: {
  43. type: Boolean,
  44. default: true
  45. },
  46. zIndex: {
  47. type: Number,
  48. default: 1
  49. },
  50. safeAreaInsetBottom: {
  51. type: Boolean,
  52. default: true
  53. }
  54. },
  55. methods: {
  56. updateChildren() {
  57. const { children } = this;
  58. if (!Array.isArray(children) || !children.length) {
  59. return Promise.resolve();
  60. }
  61. return Promise.all(children.map((child) => child.updateFromParent()));
  62. },
  63. onChange(child) {
  64. const index = this.children.indexOf(child);
  65. const active = child.data.name || index;
  66. if (active !== this.active) {
  67. this.$emit('change', active);
  68. }
  69. }
  70. },
  71. watch: {
  72. active: {
  73. handler: function () {
  74. const { children } = this;
  75. if (!Array.isArray(children) || !children.length) {
  76. return Promise.resolve();
  77. }
  78. return Promise.all(children.map((child) => child.updateFromParent()));
  79. },
  80. immediate: true
  81. },
  82. activeColor: {
  83. handler: function () {
  84. const { children } = this;
  85. if (!Array.isArray(children) || !children.length) {
  86. return Promise.resolve();
  87. }
  88. return Promise.all(children.map((child) => child.updateFromParent()));
  89. },
  90. immediate: true
  91. },
  92. inactiveColor: {
  93. handler: function () {
  94. const { children } = this;
  95. if (!Array.isArray(children) || !children.length) {
  96. return Promise.resolve();
  97. }
  98. return Promise.all(children.map((child) => child.updateFromParent()));
  99. },
  100. immediate: true
  101. }
  102. }
  103. };
  104. </script>
  105. <style>
  106. @import './index.css';
  107. </style>