index.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  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. active: false
  25. };
  26. },
  27. computed: {
  28. routeActive: function routeActive() {
  29. var to = this.to,
  30. $route = this.$route;
  31. if (to && $route) {
  32. var config = isObject(to) ? to : {
  33. path: to
  34. };
  35. var pathMatched = config.path === $route.path;
  36. var nameMatched = isDef(config.name) && config.name === $route.name;
  37. return pathMatched || nameMatched;
  38. }
  39. }
  40. },
  41. methods: {
  42. onClick: function onClick(event) {
  43. this.parent.onChange(this.name || this.index);
  44. this.$emit('click', event);
  45. route(this.$router, this);
  46. },
  47. genIcon: function genIcon(active) {
  48. var h = this.$createElement;
  49. var slot = this.slots('icon', {
  50. active: active
  51. });
  52. if (slot) {
  53. return slot;
  54. }
  55. if (this.icon) {
  56. return h(Icon, {
  57. "attrs": {
  58. "name": this.icon,
  59. "classPrefix": this.iconPrefix
  60. }
  61. });
  62. }
  63. }
  64. },
  65. render: function render() {
  66. var _this$badge;
  67. var h = arguments[0];
  68. var active = this.parent.route ? this.routeActive : this.active;
  69. var color = this.parent[active ? 'activeColor' : 'inactiveColor'];
  70. if (process.env.NODE_ENV === 'development' && this.info) {
  71. console.warn('[Vant] TabbarItem: "info" prop is deprecated, use "badge" prop instead.');
  72. }
  73. return h("div", {
  74. "class": bem({
  75. active: active
  76. }),
  77. "style": {
  78. color: color
  79. },
  80. "on": {
  81. "click": this.onClick
  82. }
  83. }, [h("div", {
  84. "class": bem('icon')
  85. }, [this.genIcon(active), h(Info, {
  86. "attrs": {
  87. "dot": this.dot,
  88. "info": (_this$badge = this.badge) != null ? _this$badge : this.info
  89. }
  90. })]), h("div", {
  91. "class": bem('text')
  92. }, [this.slots('default', {
  93. active: active
  94. })])]);
  95. }
  96. });