button.ts 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. // components/button/button.ts
  2. Component({
  3. behaviors: ["wx://form-field-button"],
  4. observers: {
  5. loading(this: any, val: boolean) {
  6. // 当外部声明 loading 时,同步禁用状态
  7. this.setData({ isDisabled: !!val });
  8. },
  9. },
  10. lifetimes: {
  11. attached(this: any) {
  12. console.log("[Button] attached, initializing...");
  13. const mode = this.data.block ? "block" : "line";
  14. const index = this.data.index;
  15. this.setData({
  16. src: `../../assets/bg/button-${mode}-${index}.bg.png`,
  17. className: this.data.block ? "block" : `line-${index}`,
  18. isDisabled: false,
  19. });
  20. console.log(
  21. "[Button] initialized with isDisabled:",
  22. this.data.isDisabled
  23. );
  24. },
  25. },
  26. properties: {
  27. block: { type: Boolean, value: false },
  28. index: { type: Number, value: 1 },
  29. loading: { type: Boolean, value: false },
  30. text: { type: String, value: "" },
  31. // 是否在点击后禁用按钮,避免重复提交
  32. disableOnClick: { type: Boolean, value: true },
  33. },
  34. data: {
  35. list: [
  36. {
  37. name: "保存",
  38. value: "save",
  39. },
  40. {
  41. name: "提交",
  42. value: "submit",
  43. },
  44. {
  45. name: "确定",
  46. value: "confirm",
  47. },
  48. {
  49. name: "取消",
  50. value: "cancel",
  51. },
  52. ],
  53. src: "",
  54. isDisabled: false,
  55. _lastResetTime: 0,
  56. },
  57. methods: {
  58. handleSubmit(this: any) {
  59. console.log(this.data.isDisabled, "handleSubmit");
  60. if (this.data.isDisabled) {
  61. return;
  62. }
  63. // 如果是刚刚重置的按钮(100ms内),不要立即禁用
  64. const now = Date.now();
  65. console.log(
  66. now - this.data._lastResetTime < 100,
  67. "now - this.data._lastResetTime < 100"
  68. );
  69. if (now - this.data._lastResetTime < 100) {
  70. this.triggerEvent("submit");
  71. return;
  72. }
  73. console.log(this.data.disableOnClick, "this.data.disableOnClick");
  74. // 点击后可选地禁用按钮,防止重复提交;外部完成后请调用 resetState 或将 loading 置为 false
  75. if (this.data.disableOnClick) {
  76. this.setData({ isDisabled: true });
  77. }
  78. console.log("triggerEvent");
  79. this.triggerEvent("submit");
  80. },
  81. resetState(this: any) {
  82. this.setData({
  83. isDisabled: false,
  84. _lastResetTime: Date.now(),
  85. });
  86. },
  87. valFailure(this: any) {
  88. // 处理失败逻辑
  89. if (this) this.setData({ isDisabled: true }); // 重置按钮状态
  90. },
  91. },
  92. });