NavBar.mjs 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  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. };
  18. var stdin_default = defineComponent({
  19. name,
  20. props: navBarProps,
  21. emits: ["click-left", "click-right"],
  22. setup(props, {
  23. emit,
  24. slots
  25. }) {
  26. const navBarRef = ref();
  27. const renderPlaceholder = usePlaceholder(navBarRef, bem);
  28. const onClickLeft = (event) => emit("click-left", event);
  29. const onClickRight = (event) => emit("click-right", event);
  30. const renderLeft = () => {
  31. if (slots.left) {
  32. return slots.left();
  33. }
  34. return [props.leftArrow && _createVNode(Icon, {
  35. "class": bem("arrow"),
  36. "name": "arrow-left"
  37. }, null), props.leftText && _createVNode("span", {
  38. "class": bem("text")
  39. }, [props.leftText])];
  40. };
  41. const renderRight = () => {
  42. if (slots.right) {
  43. return slots.right();
  44. }
  45. return _createVNode("span", {
  46. "class": bem("text")
  47. }, [props.rightText]);
  48. };
  49. const renderNavBar = () => {
  50. const {
  51. title,
  52. fixed,
  53. border,
  54. zIndex
  55. } = props;
  56. const style = getZIndexStyle(zIndex);
  57. const hasLeft = props.leftArrow || props.leftText || slots.left;
  58. const hasRight = props.rightText || slots.right;
  59. return _createVNode("div", {
  60. "ref": navBarRef,
  61. "style": style,
  62. "class": [bem({
  63. fixed
  64. }), {
  65. [BORDER_BOTTOM]: border,
  66. "van-safe-area-top": props.safeAreaInsetTop
  67. }]
  68. }, [_createVNode("div", {
  69. "class": bem("content")
  70. }, [hasLeft && _createVNode("div", {
  71. "class": [bem("left"), HAPTICS_FEEDBACK],
  72. "onClick": onClickLeft
  73. }, [renderLeft()]), _createVNode("div", {
  74. "class": [bem("title"), "van-ellipsis"]
  75. }, [slots.title ? slots.title() : title]), hasRight && _createVNode("div", {
  76. "class": [bem("right"), HAPTICS_FEEDBACK],
  77. "onClick": onClickRight
  78. }, [renderRight()])])]);
  79. };
  80. return () => {
  81. if (props.fixed && props.placeholder) {
  82. return renderPlaceholder(renderNavBar);
  83. }
  84. return renderNavBar();
  85. };
  86. }
  87. });
  88. export {
  89. stdin_default as default
  90. };