| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- // components/button/button.ts
- Component({
- behaviors: ["wx://form-field-button"],
- observers: {
- loading(this: any, val: boolean) {
- // 当外部声明 loading 时,同步禁用状态
- this.setData({ isDisabled: !!val });
- }
- },
- lifetimes: {
- attached(this: any) {
- console.log("[Button] attached, initializing...");
- const mode = this.data.block ? "block" : "line";
- const index = this.data.index;
- this.setData({
- src: `../../assets/bg/button-${mode}-${index}.bg.png`,
- className: this.data.block ? "block" : `line-${index}`,
- isDisabled: false,
- });
- console.log(
- "[Button] initialized with isDisabled:",
- this.data.isDisabled
- );
- },
- },
- properties: {
- block: { type: Boolean, value: false },
- index: { type: Number, value: 1 },
- loading: { type: Boolean, value: false },
- text: { type: String, value: "" },
- // 是否在点击后禁用按钮,避免重复提交
- disableOnClick: { type: Boolean, value: true },
- },
- data: {
- list: [
- {
- name: "保存",
- value: "save",
- },
- {
- name: "提交",
- value: "submit",
- },
- {
- name: "确定",
- value: "confirm",
- },
- {
- name: "取消",
- value: "cancel",
- },
- ],
- src: "",
- isDisabled: false,
- _lastResetTime: 0,
- },
- methods: {
- handleSubmit(this: any) {
- if (this.data.isDisabled) {
- return;
- }
- // 如果是刚刚重置的按钮(100ms内),不要立即禁用
- const now = Date.now();
- if (now - this.data._lastResetTime < 100) {
- this.triggerEvent("submit");
- return;
- }
- // 点击后可选地禁用按钮,防止重复提交;外部完成后请调用 resetState 或将 loading 置为 false
- if (this.data.disableOnClick) {
- this.setData({ isDisabled: true });
- }
- this.triggerEvent("submit");
- },
- resetState(this: any) {
- this.setData({
- isDisabled: false,
- _lastResetTime: Date.now(),
- });
- },
- valFailure(this: any) {
- // 处理失败逻辑
- if (this) this.setData({ isDisabled: true }); // 重置按钮状态
- },
- },
- });
|