NavBar.mjs 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import { createVNode as _createVNode } from "vue";
  2. import { ref, defineComponent } from "vue";
  3. import { truthProp, numericProp, BORDER_BOTTOM, getZIndexStyle, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
  4. import { usePlaceholder } from "../composables/use-placeholder.mjs";
  5. import { Icon } from "../icon/index.mjs";
  6. const [name, bem] = createNamespace("nav-bar");
  7. const navBarProps = {
  8. title: String,
  9. fixed: Boolean,
  10. zIndex: numericProp,
  11. border: truthProp,
  12. leftText: String,
  13. rightText: String,
  14. leftArrow: Boolean,
  15. placeholder: Boolean,
  16. safeAreaInsetTop: Boolean,
  17. clickable: truthProp
  18. };
  19. var stdin_default = defineComponent({
  20. name,
  21. props: navBarProps,
  22. emits: ["clickLeft", "clickRight"],
  23. setup(props, {
  24. emit,
  25. slots
  26. }) {
  27. const navBarRef = ref();
  28. const renderPlaceholder = usePlaceholder(navBarRef, bem);
  29. const onClickLeft = (event) => emit("clickLeft", event);
  30. const onClickRight = (event) => emit("clickRight", event);
  31. const renderLeft = () => {
  32. if (slots.left) {
  33. return slots.left();
  34. }
  35. return [props.leftArrow && _createVNode(Icon, {
  36. "class": bem("arrow"),
  37. "name": "arrow-left"
  38. }, null), props.leftText && _createVNode("span", {
  39. "class": bem("text")
  40. }, [props.leftText])];
  41. };
  42. const renderRight = () => {
  43. if (slots.right) {
  44. return slots.right();
  45. }
  46. return _createVNode("span", {
  47. "class": bem("text")
  48. }, [props.rightText]);
  49. };
  50. const renderNavBar = () => {
  51. const {
  52. title,
  53. fixed,
  54. border,
  55. zIndex
  56. } = props;
  57. const style = getZIndexStyle(zIndex);
  58. const hasLeft = props.leftArrow || props.leftText || slots.left;
  59. const hasRight = props.rightText || slots.right;
  60. return _createVNode("div", {
  61. "ref": navBarRef,
  62. "style": style,
  63. "class": [bem({
  64. fixed
  65. }), {
  66. [BORDER_BOTTOM]: border,
  67. "van-safe-area-top": props.safeAreaInsetTop
  68. }]
  69. }, [_createVNode("div", {
  70. "class": bem("content")
  71. }, [hasLeft && _createVNode("div", {
  72. "class": [bem("left"), props.clickable ? HAPTICS_FEEDBACK : ""],
  73. "onClick": onClickLeft
  74. }, [renderLeft()]), _createVNode("div", {
  75. "class": [bem("title"), "van-ellipsis"]
  76. }, [slots.title ? slots.title() : title]), hasRight && _createVNode("div", {
  77. "class": [bem("right"), props.clickable ? HAPTICS_FEEDBACK : ""],
  78. "onClick": onClickRight
  79. }, [renderRight()])])]);
  80. };
  81. return () => {
  82. if (props.fixed && props.placeholder) {
  83. return renderPlaceholder(renderNavBar);
  84. }
  85. return renderNavBar();
  86. };
  87. }
  88. });
  89. export {
  90. stdin_default as default,
  91. navBarProps
  92. };