NavBar.mjs 3.0 KB

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