index.tsx 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. import { use, noop } from '../utils';
  2. import { inherit } from '../utils/functional';
  3. import Icon from '../icon';
  4. // Types
  5. import { CreateElement, RenderContext } from 'vue/types';
  6. import { ScopedSlot, DefaultSlots } from '../utils/use/sfc';
  7. export type NavBarProps = {
  8. title?: string;
  9. fixed?: boolean;
  10. zIndex: number;
  11. border: boolean;
  12. leftText?: string;
  13. rightText?: string;
  14. leftArrow?: boolean;
  15. };
  16. export type NavBarSlots = DefaultSlots & {
  17. left?: ScopedSlot;
  18. title?: ScopedSlot;
  19. right?: ScopedSlot;
  20. };
  21. export type NavBarEvents = {
  22. 'click-left'?(event: Event): void;
  23. 'click-right'?(event: Event): void;
  24. };
  25. const [sfc, bem] = use('nav-bar');
  26. function NavBar(
  27. h: CreateElement,
  28. props: NavBarProps,
  29. slots: NavBarSlots,
  30. ctx: RenderContext<NavBarProps>
  31. ) {
  32. return (
  33. <div
  34. class={[
  35. bem({ fixed: props.fixed }),
  36. { 'van-hairline--bottom': props.border }
  37. ]}
  38. style={{ zIndex: props.zIndex }}
  39. {...inherit(ctx)}
  40. >
  41. <div class={bem('left')} onClick={ctx.listeners['click-left'] || noop}>
  42. {slots.left
  43. ? slots.left()
  44. : [
  45. props.leftArrow && (
  46. <Icon class={bem('arrow')} name="arrow-left" />
  47. ),
  48. props.leftText && (
  49. <span class={bem('text')}>{props.leftText}</span>
  50. )
  51. ]}
  52. </div>
  53. <div class={[bem('title'), 'van-ellipsis']}>
  54. {slots.title ? slots.title() : props.title}
  55. </div>
  56. <div class={bem('right')} onClick={ctx.listeners['click-right'] || noop}>
  57. {slots.right
  58. ? slots.right()
  59. : props.rightText && (
  60. <span class={bem('text')}>{props.rightText}</span>
  61. )}
  62. </div>
  63. </div>
  64. );
  65. }
  66. NavBar.props = {
  67. title: String,
  68. fixed: Boolean,
  69. leftText: String,
  70. rightText: String,
  71. leftArrow: Boolean,
  72. border: {
  73. type: Boolean,
  74. default: true
  75. },
  76. zIndex: {
  77. type: Number,
  78. default: 1
  79. }
  80. };
  81. export default sfc<NavBarProps, NavBarEvents>(NavBar);