index.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. // Utils
  3. import { createNamespace, isObject, isDef } from '../utils';
  4. import { route, routeProps } from '../utils/router'; // Mixins
  5. import { ChildrenMixin } from '../mixins/relation'; // Components
  6. import Icon from '../icon';
  7. import Info from '../info';
  8. var _createNamespace = createNamespace('tabbar-item'),
  9. createComponent = _createNamespace[0],
  10. bem = _createNamespace[1];
  11. export default createComponent({
  12. mixins: [ChildrenMixin('vanTabbar')],
  13. props: _extends({}, routeProps, {
  14. dot: Boolean,
  15. icon: String,
  16. name: [Number, String],
  17. // @deprecated
  18. info: [Number, String],
  19. badge: [Number, String],
  20. iconPrefix: String
  21. }),
  22. data: function data() {
  23. return {
  24. nameMatched: false
  25. };
  26. },
  27. computed: {
  28. active: function active() {
  29. var routeMode = this.parent.route;
  30. if (routeMode && '$route' in this) {
  31. var to = this.to,
  32. $route = this.$route;
  33. var config = isObject(to) ? to : {
  34. path: to
  35. };
  36. return !!$route.matched.find(function (r) {
  37. // vue-router 3.x $route.matched[0].path is empty in / and its children paths
  38. var path = r.path === '' ? '/' : r.path;
  39. var pathMatched = config.path === path;
  40. var nameMatched = isDef(config.name) && config.name === r.name;
  41. return pathMatched || nameMatched;
  42. });
  43. }
  44. return this.nameMatched;
  45. }
  46. },
  47. methods: {
  48. onClick: function onClick(event) {
  49. var _this = this;
  50. if (!this.active) {
  51. this.parent.triggerChange(this.name || this.index, function () {
  52. route(_this.$router, _this);
  53. });
  54. }
  55. this.$emit('click', event);
  56. },
  57. genIcon: function genIcon() {
  58. var h = this.$createElement;
  59. var slot = this.slots('icon', {
  60. active: this.active
  61. });
  62. if (slot) {
  63. return slot;
  64. }
  65. if (this.icon) {
  66. return h(Icon, {
  67. "attrs": {
  68. "name": this.icon,
  69. "classPrefix": this.iconPrefix
  70. }
  71. });
  72. }
  73. }
  74. },
  75. render: function render() {
  76. var _this$badge;
  77. var h = arguments[0];
  78. var active = this.active;
  79. var color = this.parent[active ? 'activeColor' : 'inactiveColor'];
  80. if (process.env.NODE_ENV === 'development' && this.info) {
  81. console.warn('[Vant] TabbarItem: "info" prop is deprecated, use "badge" prop instead.');
  82. }
  83. return h("div", {
  84. "class": bem({
  85. active: active
  86. }),
  87. "style": {
  88. color: color
  89. },
  90. "on": {
  91. "click": this.onClick
  92. }
  93. }, [h("div", {
  94. "class": bem('icon')
  95. }, [this.genIcon(), h(Info, {
  96. "attrs": {
  97. "dot": this.dot,
  98. "info": (_this$badge = this.badge) != null ? _this$badge : this.info
  99. }
  100. })]), h("div", {
  101. "class": bem('text')
  102. }, [this.slots('default', {
  103. active: active
  104. })])]);
  105. }
  106. });