TabbarItem.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. var __defProp = Object.defineProperty;
  2. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  3. var __getOwnPropNames = Object.getOwnPropertyNames;
  4. var __hasOwnProp = Object.prototype.hasOwnProperty;
  5. var __export = (target, all) => {
  6. for (var name2 in all)
  7. __defProp(target, name2, { get: all[name2], enumerable: true });
  8. };
  9. var __copyProps = (to, from, except, desc) => {
  10. if (from && typeof from === "object" || typeof from === "function") {
  11. for (let key of __getOwnPropNames(from))
  12. if (!__hasOwnProp.call(to, key) && key !== except)
  13. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  14. }
  15. return to;
  16. };
  17. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  18. var stdin_exports = {};
  19. __export(stdin_exports, {
  20. default: () => stdin_default,
  21. tabbarItemProps: () => tabbarItemProps
  22. });
  23. module.exports = __toCommonJS(stdin_exports);
  24. var import_vue = require("vue");
  25. var import_vue2 = require("vue");
  26. var import_utils = require("../utils");
  27. var import_Tabbar = require("../tabbar/Tabbar");
  28. var import_use = require("@vant/use");
  29. var import_use_route = require("../composables/use-route");
  30. var import_icon = require("../icon");
  31. var import_badge = require("../badge");
  32. const [name, bem] = (0, import_utils.createNamespace)("tabbar-item");
  33. const tabbarItemProps = (0, import_utils.extend)({}, import_use_route.routeProps, {
  34. dot: Boolean,
  35. icon: String,
  36. name: import_utils.numericProp,
  37. badge: import_utils.numericProp,
  38. badgeProps: Object,
  39. iconPrefix: String
  40. });
  41. var stdin_default = (0, import_vue2.defineComponent)({
  42. name,
  43. props: tabbarItemProps,
  44. emits: ["click"],
  45. setup(props, {
  46. emit,
  47. slots
  48. }) {
  49. const route = (0, import_use_route.useRoute)();
  50. const vm = (0, import_vue2.getCurrentInstance)().proxy;
  51. const {
  52. parent,
  53. index
  54. } = (0, import_use.useParent)(import_Tabbar.TABBAR_KEY);
  55. if (!parent) {
  56. if (process.env.NODE_ENV !== "production") {
  57. console.error("[Vant] <TabbarItem> must be a child component of <Tabbar>.");
  58. }
  59. return;
  60. }
  61. const active = (0, import_vue2.computed)(() => {
  62. var _a;
  63. const {
  64. route: route2,
  65. modelValue
  66. } = parent.props;
  67. if (route2 && "$route" in vm) {
  68. const {
  69. $route
  70. } = vm;
  71. const {
  72. to
  73. } = props;
  74. const config = (0, import_utils.isObject)(to) ? to : {
  75. path: to
  76. };
  77. return !!$route.matched.find((val) => {
  78. const pathMatched = "path" in config && config.path === val.path;
  79. const nameMatched = "name" in config && config.name === val.name;
  80. return pathMatched || nameMatched;
  81. });
  82. }
  83. return ((_a = props.name) != null ? _a : index.value) === modelValue;
  84. });
  85. const onClick = (event) => {
  86. var _a;
  87. if (!active.value) {
  88. parent.setActive((_a = props.name) != null ? _a : index.value, route);
  89. }
  90. emit("click", event);
  91. };
  92. const renderIcon = () => {
  93. if (slots.icon) {
  94. return slots.icon({
  95. active: active.value
  96. });
  97. }
  98. if (props.icon) {
  99. return (0, import_vue.createVNode)(import_icon.Icon, {
  100. "name": props.icon,
  101. "classPrefix": props.iconPrefix
  102. }, null);
  103. }
  104. };
  105. return () => {
  106. var _a;
  107. const {
  108. dot,
  109. badge
  110. } = props;
  111. const {
  112. activeColor,
  113. inactiveColor
  114. } = parent.props;
  115. const color = active.value ? activeColor : inactiveColor;
  116. return (0, import_vue.createVNode)("div", {
  117. "role": "tab",
  118. "class": bem({
  119. active: active.value
  120. }),
  121. "style": {
  122. color
  123. },
  124. "tabindex": 0,
  125. "aria-selected": active.value,
  126. "onClick": onClick
  127. }, [(0, import_vue.createVNode)(import_badge.Badge, (0, import_vue.mergeProps)({
  128. "dot": dot,
  129. "class": bem("icon"),
  130. "content": badge
  131. }, props.badgeProps), {
  132. default: renderIcon
  133. }), (0, import_vue.createVNode)("div", {
  134. "class": bem("text")
  135. }, [(_a = slots.default) == null ? void 0 : _a.call(slots, {
  136. active: active.value
  137. })])]);
  138. };
  139. }
  140. });