fix(layout): fix gutter bug (#1537)

* layout: fix gutter bug

* layout: fix gutter value

* fix: refacotor

* fix: refactor

Co-authored-by: Ryan2128 <33176053+Ryan2128@users.noreply.github.com>

packages/col/__tests__/layout.spec.ts

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils'
+import { h, ref, nextTick } from 'vue'
 import Col from '../src/col'
 import Row from '../src/row'
 
@@ -44,6 +45,41 @@ describe('Col', () => {
     expect(colElm.style.paddingLeft === '10px').toBe(true)
     expect(colElm.style.paddingRight === '10px').toBe(true)
   })
+
+  it('change gutter value', async () => {
+    const outer = ref(20)
+    const App = {
+      setup() {
+        return () => {
+          return h(Row, {
+            gutter: outer.value,
+            ref: 'row',
+          }, [
+            h(Col, {
+              span: 12,
+              ref: 'col',
+            }),
+          ])
+        }
+      },
+    }
+
+    const wrapper = mount(App)
+    const rowElm = wrapper.findComponent({ ref: 'row' }).element as HTMLElement
+    const colElm = wrapper.findComponent({ ref: 'col' }).element as HTMLElement
+    expect(rowElm.style.marginLeft === '-10px').toBe(true)
+    expect(rowElm.style.marginRight === '-10px').toBe(true)
+    expect(colElm.style.paddingLeft === '10px').toBe(true)
+    expect(colElm.style.paddingRight === '10px').toBe(true)
+
+    outer.value = 40 // change gutter value
+    await nextTick()
+    expect(rowElm.style.marginLeft === '-20px').toBe(true)
+    expect(rowElm.style.marginRight === '-20px').toBe(true)
+    expect(colElm.style.paddingLeft === '20px').toBe(true)
+    expect(colElm.style.paddingRight === '20px').toBe(true)
+  })
+
   it('responsive', () => {
     const TestComponent = {
       template: `<el-row :gutter="20">

packages/col/src/col.ts

@@ -50,13 +50,13 @@ const ElCol = defineComponent({
     },
   },
   setup(props, { slots }) {
-    const gutter = inject('ElRow', 0)
+    const { gutter } = inject('ElRow', { gutter: { value: 0 } })
 
     const style = computed(() => {
-      if (gutter) {
+      if (gutter.value) {
         return {
-          paddingLeft: gutter / 2 + 'px',
-          paddingRight: gutter / 2 + 'px',
+          paddingLeft: gutter.value / 2 + 'px',
+          paddingRight: gutter.value / 2 + 'px',
         }
       }
       return {}
@@ -84,7 +84,7 @@ const ElCol = defineComponent({
         }
       })
       // this is for the fix
-      if (gutter) {
+      if (gutter.value) {
         ret.push('is-guttered')
       }
 

packages/col/src/row.ts

@@ -25,7 +25,10 @@ export default defineComponent({
     },
   },
   setup(props, { slots }) {
-    provide('ElRow', props.gutter)
+    const gutter = computed(() => props.gutter)
+    provide('ElRow', {
+      gutter,
+    })
 
     const style = computed(() => {
       const ret = {