alert-tip.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. Component({
  2. properties: {
  3. // 提示内容
  4. content: {
  5. type: String,
  6. value: ''
  7. },
  8. // 容器背景颜色
  9. containerBgColor: {
  10. type: String,
  11. value: '#e3e3e3'
  12. },
  13. // 背景颜色
  14. bgColor: {
  15. type: String,
  16. value: '#CA4B15'
  17. },
  18. // 文字颜色
  19. textColor: {
  20. type: String,
  21. value: '#FFFFFF'
  22. },
  23. // 图标路径
  24. iconPath: {
  25. type: String,
  26. value: '../../pages/images/sysIcon_b11.png'
  27. },
  28. // 显示时长(毫秒),显示多久后开始淡出
  29. duration: {
  30. type: Number,
  31. value: 1000
  32. },
  33. // 淡出动画时长(毫秒)
  34. fadeOutDuration: {
  35. type: Number,
  36. value: 1000
  37. }
  38. },
  39. data: {
  40. isShow: false,
  41. alertClass: ''
  42. },
  43. data: {
  44. isShow: false,
  45. alertClass: '',
  46. isProcessing: false // 新增标志,表示是否正在处理提示
  47. },
  48. methods: {
  49. // 显示提示
  50. showAlert: function(content) {
  51. const that = this;
  52. // 如果当前已有提示在显示或处理中,则忽略此次调用
  53. if (this.data.isProcessing) {
  54. return;
  55. }
  56. // 标记为正在处理中
  57. this.setData({
  58. isProcessing: true
  59. });
  60. // 如果传入了content参数,则更新content属性
  61. if (content) {
  62. this.setData({
  63. content: content
  64. });
  65. }
  66. // 显示提示
  67. this.setData({
  68. isShow: true,
  69. alertClass: ''
  70. });
  71. // 设置定时器,显示一段时间后开始淡出
  72. setTimeout(function() {
  73. that.setData({
  74. alertClass: 'alert-fadeout'
  75. });
  76. // 淡出动画结束后,完全隐藏元素
  77. setTimeout(function() {
  78. that.setData({
  79. isShow: false,
  80. alertClass: '',
  81. isProcessing: false // 处理完成,重置标志
  82. });
  83. }, that.data.fadeOutDuration);
  84. }, that.data.duration);
  85. }
  86. }
  87. });