Toast.mjs 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
  2. import { watch, onMounted, onUnmounted, defineComponent } from "vue";
  3. import { pick, isDef, unknownProp, numericProp, makeStringProp, makeNumberProp, createNamespace } from "../utils/index.mjs";
  4. import { lockClick } from "./lock-click.mjs";
  5. import { Icon } from "../icon/index.mjs";
  6. import { Popup } from "../popup/index.mjs";
  7. import { Loading } from "../loading/index.mjs";
  8. const [name, bem] = createNamespace("toast");
  9. const popupInheritProps = ["show", "overlay", "teleport", "transition", "overlayClass", "overlayStyle", "closeOnClickOverlay"];
  10. const toastProps = {
  11. icon: String,
  12. show: Boolean,
  13. type: makeStringProp("text"),
  14. overlay: Boolean,
  15. message: numericProp,
  16. iconSize: numericProp,
  17. duration: makeNumberProp(2e3),
  18. position: makeStringProp("middle"),
  19. teleport: [String, Object],
  20. className: unknownProp,
  21. iconPrefix: String,
  22. transition: makeStringProp("van-fade"),
  23. loadingType: String,
  24. forbidClick: Boolean,
  25. overlayClass: unknownProp,
  26. overlayStyle: Object,
  27. closeOnClick: Boolean,
  28. closeOnClickOverlay: Boolean
  29. };
  30. var stdin_default = defineComponent({
  31. name,
  32. props: toastProps,
  33. emits: ["update:show"],
  34. setup(props, {
  35. emit
  36. }) {
  37. let timer;
  38. let clickable = false;
  39. const toggleClickable = () => {
  40. const newValue = props.show && props.forbidClick;
  41. if (clickable !== newValue) {
  42. clickable = newValue;
  43. lockClick(clickable);
  44. }
  45. };
  46. const updateShow = (show) => emit("update:show", show);
  47. const onClick = () => {
  48. if (props.closeOnClick) {
  49. updateShow(false);
  50. }
  51. };
  52. const clearTimer = () => clearTimeout(timer);
  53. const renderIcon = () => {
  54. const {
  55. icon,
  56. type,
  57. iconSize,
  58. iconPrefix,
  59. loadingType
  60. } = props;
  61. const hasIcon = icon || type === "success" || type === "fail";
  62. if (hasIcon) {
  63. return _createVNode(Icon, {
  64. "name": icon || type,
  65. "size": iconSize,
  66. "class": bem("icon"),
  67. "classPrefix": iconPrefix
  68. }, null);
  69. }
  70. if (type === "loading") {
  71. return _createVNode(Loading, {
  72. "class": bem("loading"),
  73. "size": iconSize,
  74. "type": loadingType
  75. }, null);
  76. }
  77. };
  78. const renderMessage = () => {
  79. const {
  80. type,
  81. message
  82. } = props;
  83. if (isDef(message) && message !== "") {
  84. return type === "html" ? _createVNode("div", {
  85. "key": 0,
  86. "class": bem("text"),
  87. "innerHTML": String(message)
  88. }, null) : _createVNode("div", {
  89. "class": bem("text")
  90. }, [message]);
  91. }
  92. };
  93. watch(() => [props.show, props.forbidClick], toggleClickable);
  94. watch(() => [props.show, props.type, props.message, props.duration], () => {
  95. clearTimer();
  96. if (props.show && props.duration > 0) {
  97. timer = setTimeout(() => {
  98. updateShow(false);
  99. }, props.duration);
  100. }
  101. });
  102. onMounted(toggleClickable);
  103. onUnmounted(toggleClickable);
  104. return () => _createVNode(Popup, _mergeProps({
  105. "class": [bem([props.position, {
  106. [props.type]: !props.icon
  107. }]), props.className],
  108. "lockScroll": false,
  109. "onClick": onClick,
  110. "onClosed": clearTimer,
  111. "onUpdate:show": updateShow
  112. }, pick(props, popupInheritProps)), {
  113. default: () => [renderIcon(), renderMessage()]
  114. });
  115. }
  116. });
  117. export {
  118. stdin_default as default
  119. };