fix(vue): fix the problem that the component class name will be overw…

…ritten rather than merged (#2260)
alibaba · Sep 30, 2021 · 7305373 · 7305373
1 parent 3b8676b
commit 7305373
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 1 deletion.
diff --git a/packages/vue/src/__tests__/field.spec.ts b/packages/vue/src/__tests__/field.spec.ts
@@ -35,6 +35,7 @@ const Input = defineComponent({
     return () => {
       const field = fieldRef.value
       return h('input', {
+        class: 'test-input',
         attrs: {
           ...attrs,
           value: props.value,
@@ -147,6 +148,54 @@ test('render field', async () => {
   expect(getByTestId('mm-children')).not.toBeUndefined()
 })
 
+test('render field with html attrs', async () => {
+  const form = createForm()
+
+  const { getByTestId, container } = render(
+    defineComponent({
+      name: 'TestComponent',
+      setup() {
+        return {
+          form,
+          Input,
+          Decorator,
+        }
+      },
+      template: `<FormProvider :form="form">
+      <Field
+        name="aa"
+        :decorator="[Decorator, {
+          'data-testid': 'decorator',
+          class: {
+            'test-class': true
+          },
+          style: {
+            marginRight: '10px'
+          }
+        }]"
+        :component="[Input, {
+          class: {
+            'test-class': true
+          },
+          style: {
+            marginLeft: '10px'
+          }
+        }]"
+      />
+    </FormProvider>`,
+    })
+  )
+  expect(form.mounted).toBeTruthy()
+  expect(form.query('aa').take().mounted).toBeTruthy()
+  expect(getByTestId('aa').className.indexOf('test-input') !== -1).toBeTruthy()
+  expect(getByTestId('aa').className.indexOf('test-class') !== -1).toBeTruthy()
+  expect(getByTestId('aa').style.marginLeft).toEqual('10px')
+  expect(
+    getByTestId('decorator').className.indexOf('test-class') !== -1
+  ).toBeTruthy()
+  expect(getByTestId('decorator').style.marginRight).toEqual('10px')
+})
+
 test('ReactiveField', () => {
   render({
     template: `<ReactiveField :field="null" />`,

diff --git a/packages/vue/src/components/ReactiveField.ts b/packages/vue/src/components/ReactiveField.ts
@@ -97,13 +97,16 @@ export default observer(
               ) ?? field.decorator[0]) as VueComponent
               const decoratorData = toJS(field.decorator[1]) || {}
               const style = decoratorData?.style
+              const classes = decoratorData?.class
               delete decoratorData.style
+              delete decoratorData.class
               return {
                 default: () =>
                   h(
                     decorator,
                     {
                       style,
+                      class: classes,
                       attrs: decoratorData,
                     },
                     {
@@ -170,7 +173,9 @@ export default observer(
             }
 
             const style = originData?.style
-            delete originData?.style
+            const classes = originData?.class
+            delete originData.style
+            delete originData.class
             const attrs = {
               disabled: !isVoidField(field)
                 ? field.pattern === 'disabled' || field.pattern === 'readPretty'
@@ -185,6 +190,7 @@ export default observer(
             const componentData = {
               attrs,
               style,
+              class: classes,
               on: events,
             }