Tabbar.mjs 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. import { ref, defineComponent, createVNode as _createVNode } from "vue";
  2. import { truthProp, numericProp, getZIndexStyle, createNamespace, callInterceptor, makeNumericProp, BORDER_TOP_BOTTOM } from "../utils/index.mjs";
  3. import { useChildren } from "@vant/use";
  4. import { usePlaceholder } from "../composables/use-placeholder.mjs";
  5. const [name, bem] = createNamespace("tabbar");
  6. const tabbarProps = {
  7. route: Boolean,
  8. fixed: truthProp,
  9. border: truthProp,
  10. zIndex: numericProp,
  11. placeholder: Boolean,
  12. activeColor: String,
  13. beforeChange: Function,
  14. inactiveColor: String,
  15. modelValue: makeNumericProp(0),
  16. safeAreaInsetBottom: {
  17. type: Boolean,
  18. default: null
  19. }
  20. };
  21. const TABBAR_KEY = Symbol(name);
  22. var stdin_default = defineComponent({
  23. name,
  24. props: tabbarProps,
  25. emits: ["change", "update:modelValue"],
  26. setup(props, {
  27. emit,
  28. slots
  29. }) {
  30. const root = ref();
  31. const {
  32. linkChildren
  33. } = useChildren(TABBAR_KEY);
  34. const renderPlaceholder = usePlaceholder(root, bem);
  35. const enableSafeArea = () => {
  36. var _a;
  37. return (_a = props.safeAreaInsetBottom) != null ? _a : props.fixed;
  38. };
  39. const renderTabbar = () => {
  40. var _a;
  41. const {
  42. fixed,
  43. zIndex,
  44. border
  45. } = props;
  46. return _createVNode("div", {
  47. "ref": root,
  48. "role": "tablist",
  49. "style": getZIndexStyle(zIndex),
  50. "class": [bem({
  51. fixed
  52. }), {
  53. [BORDER_TOP_BOTTOM]: border,
  54. "van-safe-area-bottom": enableSafeArea()
  55. }]
  56. }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
  57. };
  58. const setActive = (active, afterChange) => {
  59. callInterceptor(props.beforeChange, {
  60. args: [active],
  61. done() {
  62. emit("update:modelValue", active);
  63. emit("change", active);
  64. afterChange();
  65. }
  66. });
  67. };
  68. linkChildren({
  69. props,
  70. setActive
  71. });
  72. return () => {
  73. if (props.fixed && props.placeholder) {
  74. return renderPlaceholder(renderTabbar);
  75. }
  76. return renderTabbar();
  77. };
  78. }
  79. });
  80. export {
  81. TABBAR_KEY,
  82. stdin_default as default,
  83. tabbarProps
  84. };