index.js 3.2 KB

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