储能智慧云小程序
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

message.js 5.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  2. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  3. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  4. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  5. return c > 3 && r && Object.defineProperty(target, key, r), r;
  6. };
  7. import { SuperComponent, wxComponent } from '../common/src/index';
  8. import config from '../common/config';
  9. import { MessageType } from './message.interface';
  10. import props from './props';
  11. import { unitConvert } from '../common/utils';
  12. const SHOW_DURATION = 400;
  13. const { prefix } = config;
  14. const name = `${prefix}-message`;
  15. let Message = class Message extends SuperComponent {
  16. constructor() {
  17. super(...arguments);
  18. this.options = {
  19. multipleSlots: true,
  20. };
  21. this.properties = Object.assign({}, props);
  22. this.data = {
  23. prefix,
  24. classPrefix: name,
  25. messageList: [],
  26. };
  27. this.index = 0;
  28. this.instances = [];
  29. this.gap = 12;
  30. this.observers = {};
  31. this.pageLifetimes = {
  32. show() {
  33. this.hideAll();
  34. },
  35. };
  36. this.lifetimes = {
  37. ready() {
  38. this.memoInitialData();
  39. },
  40. };
  41. }
  42. memoInitialData() {
  43. this.initialData = Object.assign(Object.assign({}, this.properties), this.data);
  44. }
  45. setMessage(msg, theme = MessageType.info) {
  46. let id = `${name}_${this.index}`;
  47. if (msg.single) {
  48. id = name;
  49. }
  50. this.gap = unitConvert(msg.gap || this.gap);
  51. const msgObj = Object.assign(Object.assign({}, msg), { theme,
  52. id, gap: this.gap });
  53. const instanceIndex = this.instances.findIndex((x) => x.id === id);
  54. if (instanceIndex < 0) {
  55. this.addMessage(msgObj);
  56. }
  57. else {
  58. const instance = this.instances[instanceIndex];
  59. const offsetHeight = this.getOffsetHeight(instanceIndex);
  60. instance.resetData(() => {
  61. instance.setData(msgObj, instance.show.bind(instance, offsetHeight));
  62. instance.onHide = () => {
  63. this.close(id);
  64. };
  65. });
  66. }
  67. }
  68. addMessage(msgObj) {
  69. const list = [...this.data.messageList, { id: msgObj.id }];
  70. this.setData({
  71. messageList: list,
  72. }, () => {
  73. const offsetHeight = this.getOffsetHeight();
  74. const instance = this.showMessageItem(msgObj, msgObj.id, offsetHeight);
  75. if (this.instances) {
  76. this.instances.push(instance);
  77. this.index += 1;
  78. }
  79. });
  80. }
  81. getOffsetHeight(index = -1) {
  82. let offsetHeight = 0;
  83. let len = index;
  84. if (len === -1 || len > this.instances.length) {
  85. len = this.instances.length;
  86. }
  87. for (let i = 0; i < len; i += 1) {
  88. const instance = this.instances[i];
  89. offsetHeight += instance.data.height + instance.data.gap;
  90. }
  91. return offsetHeight;
  92. }
  93. showMessageItem(options, id, offsetHeight) {
  94. const instance = this.selectComponent(`#${id}`);
  95. if (instance) {
  96. instance.resetData(() => {
  97. instance.setData(options, instance.show.bind(instance, offsetHeight));
  98. instance.onHide = () => {
  99. this.close(id);
  100. };
  101. });
  102. return instance;
  103. }
  104. console.error('未找到组件,请确认 selector && context 是否正确');
  105. }
  106. close(id) {
  107. setTimeout(() => {
  108. this.removeMsg(id);
  109. }, SHOW_DURATION);
  110. this.removeInstance(id);
  111. }
  112. hide(id) {
  113. if (!id) {
  114. this.hideAll();
  115. }
  116. const instance = this.instances.find((x) => x.id === id);
  117. if (instance) {
  118. instance.hide();
  119. }
  120. }
  121. hideAll() {
  122. for (let i = 0; i < this.instances.length;) {
  123. const instance = this.instances[i];
  124. instance.hide();
  125. }
  126. }
  127. removeInstance(id) {
  128. const index = this.instances.findIndex((x) => x.id === id);
  129. if (index < 0)
  130. return;
  131. const instance = this.instances[index];
  132. const removedHeight = instance.data.height;
  133. this.instances.splice(index, 1);
  134. for (let i = index; i < this.instances.length; i += 1) {
  135. const instance = this.instances[i];
  136. instance.setData({
  137. wrapTop: instance.data.wrapTop - removedHeight - instance.data.gap,
  138. });
  139. }
  140. }
  141. removeMsg(id) {
  142. const msgIndex = this.data.messageList.findIndex((x) => x.id === id);
  143. if (msgIndex > -1) {
  144. this.data.messageList.splice(msgIndex, 1);
  145. this.setData({
  146. messageList: this.data.messageList,
  147. });
  148. }
  149. }
  150. handleClose() {
  151. this.triggerEvent('close-btn-click');
  152. }
  153. handleLinkClick() {
  154. this.triggerEvent('link-click');
  155. }
  156. };
  157. Message = __decorate([
  158. wxComponent()
  159. ], Message);
  160. export default Message;