index.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  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. if (this.placeholder && this.fixed) {
  53. this.height = this.$refs.tabbar.getBoundingClientRect().height;
  54. }
  55. },
  56. methods: {
  57. setActiveItem: function setActiveItem() {
  58. var _this = this;
  59. this.children.forEach(function (item, index) {
  60. item.active = (item.name || index) === _this.value;
  61. });
  62. },
  63. onChange: function onChange(active) {
  64. var _this2 = this;
  65. if (active !== this.value) {
  66. callInterceptor({
  67. interceptor: this.beforeChange,
  68. args: [active],
  69. done: function done() {
  70. _this2.$emit('input', active);
  71. _this2.$emit('change', active);
  72. }
  73. });
  74. }
  75. },
  76. genTabbar: function genTabbar() {
  77. var _ref;
  78. var h = this.$createElement;
  79. return h("div", {
  80. "ref": "tabbar",
  81. "style": {
  82. zIndex: this.zIndex
  83. },
  84. "class": [(_ref = {}, _ref[BORDER_TOP_BOTTOM] = this.border, _ref), bem({
  85. unfit: !this.fit,
  86. fixed: this.fixed
  87. })]
  88. }, [this.slots()]);
  89. }
  90. },
  91. render: function render() {
  92. var h = arguments[0];
  93. if (this.placeholder && this.fixed) {
  94. return h("div", {
  95. "class": bem('placeholder'),
  96. "style": {
  97. height: this.height + "px"
  98. }
  99. }, [this.genTabbar()]);
  100. }
  101. return this.genTabbar();
  102. }
  103. });