Notify.tsx 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. import { use } from '../utils';
  2. import { RED, WHITE } from '../utils/color';
  3. import { emit, inherit } from '../utils/functional';
  4. import { PopupMixin } from '../mixins/popup';
  5. import Popup from '../popup';
  6. // Types
  7. import { CreateElement, RenderContext } from 'vue/types';
  8. import { DefaultSlots } from '../utils/use/sfc';
  9. import { PopupMixinProps } from '../mixins/popup/type';
  10. export type NotifyProps = PopupMixinProps & {
  11. color: string;
  12. message: string | number;
  13. duration: number;
  14. className?: any;
  15. background: string;
  16. };
  17. const [sfc, bem] = use('notify');
  18. function Notify(
  19. h: CreateElement,
  20. props: NotifyProps,
  21. slots: DefaultSlots,
  22. ctx: RenderContext<NotifyProps>
  23. ) {
  24. const style = {
  25. color: props.color,
  26. background: props.background
  27. };
  28. return (
  29. <Popup
  30. value={props.value}
  31. style={style}
  32. position="top"
  33. overlay={false}
  34. lockScroll={false}
  35. class={[bem(), props.className]}
  36. onInput={(value: boolean) => {
  37. emit(ctx, 'input', value);
  38. }}
  39. {...inherit(ctx)}
  40. >
  41. {props.message}
  42. </Popup>
  43. );
  44. }
  45. Notify.props = {
  46. ...PopupMixin.props,
  47. className: null as any,
  48. message: [String, Number],
  49. color: {
  50. type: String,
  51. default: WHITE
  52. },
  53. background: {
  54. type: String,
  55. default: RED
  56. },
  57. duration: {
  58. type: Number,
  59. default: 3000
  60. }
  61. };
  62. export default sfc<NotifyProps>(Notify);