index.tsx 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. import { use } from '../utils';
  2. import { inherit } from '../utils/functional';
  3. import { preventDefault } from '../utils/event';
  4. // Types
  5. import { CreateElement, RenderContext } from 'vue/types';
  6. import { DefaultSlots } from '../utils/use/sfc';
  7. export type OverlayProps = {
  8. zIndex?: number;
  9. className?: any;
  10. visible?: boolean;
  11. customStyle?: object;
  12. };
  13. export type OverlayEvents = {
  14. click(event: Event): void;
  15. };
  16. const [sfc, bem] = use('overlay');
  17. function Overlay(
  18. h: CreateElement,
  19. props: OverlayProps,
  20. slots: DefaultSlots,
  21. ctx: RenderContext<OverlayProps>
  22. ) {
  23. const style = {
  24. zIndex: props.zIndex,
  25. ...props.customStyle
  26. };
  27. return (
  28. <transition name="van-fade">
  29. <div
  30. vShow={props.visible}
  31. style={style}
  32. class={[bem(), props.className]}
  33. onTouchmove={(event: TouchEvent) => {
  34. preventDefault(event, true);
  35. }}
  36. {...inherit(ctx, true)}
  37. />
  38. </transition>
  39. );
  40. }
  41. Overlay.props = {
  42. zIndex: Number,
  43. className: null as any,
  44. visible: Boolean,
  45. customStyle: Object
  46. };
  47. export default sfc<OverlayProps, OverlayEvents>(Overlay);