alibaba / formily

📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
https://formilyjs.org/
MIT License
11.26k stars 1.46k forks source link

[Bug Report] FormDialog组件 cancelButtonProps 属性设置不生效 #3930

Closed SorrowX closed 11 months ago

SorrowX commented 1 year ago

Reproduction link

Edit on CodeSandbox

Steps to reproduce

1.打卡链接 https://codesandbox.io/p/sandbox/vibrant-sanne-3cxgps?file=%2FDialogForm.vue%3A41%2C58-41%2C74

  1. 点击打开表单按钮

  2. 取消按钮设置的属性不生效

What is expected?

  1. 使用 cancelButtonProps: { disabled: true, size: "small", } 属性,能使取消按钮生效

What is actually happening?

取消按钮未生效

Package

@formily/element@2.2.22


原因: 传入的cancelButtonProps是引用类型,创建 Button 组件实例时,Vue内部可能对其进行了属性操作。导致render重新渲染时 cancelButtonProps 就变成的空对象,所以不生效。

  1. 源代码
    h(
    Button,
    {
    attrs: cancelButtonProps,
    on: {
      click: (e) => {
        onCancel?.(e);
        reject();
      },
    },
    },
    {
    default: () =>
      resolveComponent(cancelText || t("el.popconfirm.cancelButtonText")),
    }
    );

可以把cancelButtonProps 进行浅拷贝传入

h(
  Button,
  {
    attrs: {
      ...cancelButtonProps,
    },
    on: {
      click: (e) => {
        onCancel?.(e);
        reject();
      },
    },
  },
  {
    default: () =>
      resolveComponent(cancelText || t("el.popconfirm.cancelButtonText")),
  }
);

以上原因仅供参考,希望官网可以解决