Toast.mjs 3.7 KB

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