index.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. import { createNamespace } from '../utils';
  2. import { BORDER_TOP_BOTTOM } from '../utils/constant';
  3. import { callInterceptor } from '../utils/interceptor';
  4. import { ParentMixin } from '../mixins/relation';
  5. var _createNamespace = createNamespace('tabbar'),
  6. createComponent = _createNamespace[0],
  7. bem = _createNamespace[1];
  8. export default createComponent({
  9. mixins: [ParentMixin('vanTabbar')],
  10. props: {
  11. route: Boolean,
  12. zIndex: [Number, String],
  13. placeholder: Boolean,
  14. activeColor: String,
  15. beforeChange: Function,
  16. inactiveColor: String,
  17. value: {
  18. type: [Number, String],
  19. default: 0
  20. },
  21. border: {
  22. type: Boolean,
  23. default: true
  24. },
  25. fixed: {
  26. type: Boolean,
  27. default: true
  28. },
  29. safeAreaInsetBottom: {
  30. type: Boolean,
  31. default: null
  32. }
  33. },
  34. data: function data() {
  35. return {
  36. height: null
  37. };
  38. },
  39. computed: {
  40. fit: function fit() {
  41. if (this.safeAreaInsetBottom !== null) {
  42. return this.safeAreaInsetBottom;
  43. } // enable safe-area-inset-bottom by default when fixed
  44. return this.fixed;
  45. }
  46. },
  47. watch: {
  48. value: 'setActiveItem',
  49. children: 'setActiveItem'
  50. },
  51. mounted: function mounted() {
  52. var _this = this;
  53. if (this.placeholder && this.fixed) {
  54. var setHeight = function setHeight() {
  55. _this.height = _this.$refs.tabbar.getBoundingClientRect().height;
  56. };
  57. setHeight(); // https://github.com/vant-ui/vant/issues/10131
  58. setTimeout(setHeight, 100);
  59. }
  60. },
  61. methods: {
  62. setActiveItem: function setActiveItem() {
  63. var _this2 = this;
  64. this.children.forEach(function (item, index) {
  65. item.nameMatched = item.name === _this2.value || index === _this2.value;
  66. });
  67. },
  68. triggerChange: function triggerChange(active, afterChange) {
  69. var _this3 = this;
  70. callInterceptor({
  71. interceptor: this.beforeChange,
  72. args: [active],
  73. done: function done() {
  74. _this3.$emit('input', active);
  75. _this3.$emit('change', active);
  76. afterChange();
  77. }
  78. });
  79. },
  80. genTabbar: function genTabbar() {
  81. var _ref;
  82. var h = this.$createElement;
  83. return h("div", {
  84. "ref": "tabbar",
  85. "style": {
  86. zIndex: this.zIndex
  87. },
  88. "class": [(_ref = {}, _ref[BORDER_TOP_BOTTOM] = this.border, _ref), bem({
  89. unfit: !this.fit,
  90. fixed: this.fixed
  91. })]
  92. }, [this.slots()]);
  93. }
  94. },
  95. render: function render() {
  96. var h = arguments[0];
  97. if (this.placeholder && this.fixed) {
  98. return h("div", {
  99. "class": bem('placeholder'),
  100. "style": {
  101. height: this.height + "px"
  102. }
  103. }, [this.genTabbar()]);
  104. }
  105. return this.genTabbar();
  106. }
  107. });