Tabbar.mjs 2.1 KB

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