index.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  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="@/miniprogram_npm/@vant/weapp/wxs/utils.wxs"></script>
  10. <script>
  11. 'use strict';
  12. Object.defineProperty(exports, '__esModule', {
  13. value: true
  14. });
  15. var component_1 = require('../common/component');
  16. component_1.VantComponent({
  17. relation: {
  18. name: 'tabbar-item',
  19. type: 'descendant',
  20. current: 'tabbar',
  21. linked: function (target) {
  22. target.parent = this;
  23. target.updateFromParent();
  24. },
  25. unlinked: function () {
  26. this.updateChildren();
  27. }
  28. },
  29. props: {
  30. active: {
  31. type: null,
  32. observer: 'updateChildren'
  33. },
  34. activeColor: {
  35. type: String,
  36. observer: 'updateChildren'
  37. },
  38. inactiveColor: {
  39. type: String,
  40. observer: 'updateChildren'
  41. },
  42. fixed: {
  43. type: Boolean,
  44. value: true
  45. },
  46. border: {
  47. type: Boolean,
  48. value: true
  49. },
  50. zIndex: {
  51. type: Number,
  52. value: 1
  53. },
  54. safeAreaInsetBottom: {
  55. type: Boolean,
  56. value: true
  57. }
  58. },
  59. methods: {
  60. updateChildren: function () {
  61. var children = this.children;
  62. if (!Array.isArray(children) || !children.length) {
  63. return Promise.resolve();
  64. }
  65. return Promise.all(
  66. children.map(function (child) {
  67. return child.updateFromParent();
  68. })
  69. );
  70. },
  71. onChange: function (child) {
  72. var index = this.children.indexOf(child);
  73. var active = child.data.name || index;
  74. if (active !== this.active) {
  75. this.$emit('change', active);
  76. }
  77. }
  78. }
  79. });
  80. </script>
  81. <style>
  82. @import './index.css';
  83. </style>