u-toast.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. "use strict";
  2. const common_vendor = require("../../../../common/vendor.js");
  3. const _sfc_main = {
  4. name: "u-toast",
  5. mixins: [common_vendor.mpMixin, common_vendor.mixin],
  6. data() {
  7. return {
  8. isShow: false,
  9. timer: null,
  10. // 定时器
  11. config: {
  12. message: "",
  13. // 显示文本
  14. type: "",
  15. // 主题类型,primary,success,error,warning,black
  16. duration: 2e3,
  17. // 显示的时间,毫秒
  18. icon: true,
  19. // 显示的图标
  20. position: "center",
  21. // toast出现的位置
  22. complete: null,
  23. // 执行完后的回调函数
  24. overlay: true,
  25. // 是否防止触摸穿透
  26. loading: false
  27. // 是否加载中状态
  28. },
  29. tmpConfig: {}
  30. // 将用户配置和内置配置合并后的临时配置变量
  31. };
  32. },
  33. computed: {
  34. iconName() {
  35. if (!this.tmpConfig.icon || this.tmpConfig.icon == "none") {
  36. return "";
  37. }
  38. if (this.tmpConfig.icon === true) {
  39. if (["error", "warning", "success", "primary"].includes(this.tmpConfig.type)) {
  40. return common_vendor.type2icon(this.tmpConfig.type);
  41. } else {
  42. return "";
  43. }
  44. } else {
  45. return this.tmpConfig.icon;
  46. }
  47. },
  48. overlayStyle() {
  49. const style = {
  50. justifyContent: "center",
  51. alignItems: "center",
  52. display: "flex"
  53. };
  54. style.backgroundColor = "rgba(0, 0, 0, 0)";
  55. return style;
  56. },
  57. iconStyle() {
  58. const style = {};
  59. style.marginRight = "4px";
  60. return style;
  61. },
  62. loadingIconColor() {
  63. let colorTmp = "rgb(255, 255, 255)";
  64. if (["error", "warning", "success", "primary"].includes(this.tmpConfig.type)) {
  65. colorTmp = common_vendor.hexToRgb(common_vendor.color[this.tmpConfig.type]);
  66. }
  67. return colorTmp;
  68. },
  69. // 内容盒子的样式
  70. contentStyle() {
  71. const windowHeight = common_vendor.getWindowInfo().windowHeight, style = {};
  72. let value = 0;
  73. if (this.tmpConfig.position === "top") {
  74. value = -windowHeight * 0.25;
  75. } else if (this.tmpConfig.position === "bottom") {
  76. value = windowHeight * 0.25;
  77. }
  78. style.transform = `translateY(${value}px)`;
  79. return style;
  80. }
  81. },
  82. created() {
  83. ["primary", "success", "error", "warning", "default", "loading"].map((item) => {
  84. this[item] = (message) => this.show({
  85. type: item,
  86. message
  87. });
  88. });
  89. },
  90. methods: {
  91. // 显示toast组件,由父组件通过this.$refs.xxx.show(options)形式调用
  92. show(options) {
  93. this.tmpConfig = common_vendor.deepMerge(this.config, options);
  94. this.clearTimer();
  95. this.isShow = true;
  96. if (this.tmpConfig.duration !== -1) {
  97. this.timer = setTimeout(() => {
  98. this.clearTimer();
  99. typeof this.tmpConfig.complete === "function" && this.tmpConfig.complete();
  100. }, this.tmpConfig.duration);
  101. }
  102. },
  103. // 隐藏toast组件,由父组件通过this.$refs.xxx.hide()形式调用
  104. hide() {
  105. this.clearTimer();
  106. },
  107. clearTimer() {
  108. this.isShow = false;
  109. clearTimeout(this.timer);
  110. this.timer = null;
  111. }
  112. },
  113. beforeUnmount() {
  114. this.clearTimer();
  115. }
  116. };
  117. if (!Array) {
  118. const _easycom_u_loading_icon2 = common_vendor.resolveComponent("u-loading-icon");
  119. const _easycom_u_icon2 = common_vendor.resolveComponent("u-icon");
  120. const _easycom_u_gap2 = common_vendor.resolveComponent("u-gap");
  121. const _easycom_u_overlay2 = common_vendor.resolveComponent("u-overlay");
  122. (_easycom_u_loading_icon2 + _easycom_u_icon2 + _easycom_u_gap2 + _easycom_u_overlay2)();
  123. }
  124. const _easycom_u_loading_icon = () => "../u-loading-icon/u-loading-icon.js";
  125. const _easycom_u_icon = () => "../u-icon/u-icon.js";
  126. const _easycom_u_gap = () => "../u-gap/u-gap.js";
  127. const _easycom_u_overlay = () => "../u-overlay/u-overlay.js";
  128. if (!Math) {
  129. (_easycom_u_loading_icon + _easycom_u_icon + _easycom_u_gap + _easycom_u_overlay)();
  130. }
  131. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  132. return common_vendor.e({
  133. a: $data.tmpConfig.type === "loading"
  134. }, $data.tmpConfig.type === "loading" ? {
  135. b: common_vendor.p({
  136. mode: "circle",
  137. color: "rgb(255, 255, 255)",
  138. inactiveColor: "rgb(120, 120, 120)",
  139. size: "25"
  140. })
  141. } : $data.tmpConfig.type !== "defalut" && $options.iconName ? {
  142. d: common_vendor.p({
  143. name: $options.iconName,
  144. size: "17",
  145. color: $data.tmpConfig.type,
  146. customStyle: $options.iconStyle
  147. })
  148. } : {}, {
  149. c: $data.tmpConfig.type !== "defalut" && $options.iconName,
  150. e: $data.tmpConfig.type === "loading" || $data.tmpConfig.loading
  151. }, $data.tmpConfig.type === "loading" || $data.tmpConfig.loading ? {
  152. f: common_vendor.p({
  153. height: "12",
  154. bgColor: "transparent"
  155. })
  156. } : {}, {
  157. g: common_vendor.t($data.tmpConfig.message),
  158. h: common_vendor.n("u-toast__content__text--" + $data.tmpConfig.type),
  159. i: common_vendor.s($options.contentStyle),
  160. j: common_vendor.n("u-type-" + $data.tmpConfig.type),
  161. k: common_vendor.n($data.tmpConfig.type === "loading" || $data.tmpConfig.loading ? "u-toast__content--loading" : ""),
  162. l: common_vendor.p({
  163. show: $data.isShow,
  164. zIndex: $data.tmpConfig.overlay ? 10070 : -1,
  165. ["custom-style"]: $options.overlayStyle
  166. })
  167. });
  168. }
  169. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-2232870a"], ["__file", "C:/Users/Administrator/Desktop/srcaaa/node_modules/uview-plus/components/u-toast/u-toast.vue"]]);
  170. wx.createComponent(Component);