From 8c7edbefe02259ab7537d6a5b830fe75a17c7bdf Mon Sep 17 00:00:00 2001
From: Summer <SorrowX@users.noreply.github.com>
Date: Mon, 1 Mar 2021 21:10:18 +0800
Subject: [PATCH] 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 | 36 +++++++++++++++++++++++++++
 packages/col/src/col.ts               | 10 ++++----
 packages/col/src/row.ts               |  5 +++-
 3 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/packages/col/__tests__/layout.spec.ts b/packages/col/__tests__/layout.spec.ts
index ba1672bcb1..a2383c5bf9 100644
--- a/packages/col/__tests__/layout.spec.ts
+++ b/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">
diff --git a/packages/col/src/col.ts b/packages/col/src/col.ts
index 3581479865..9b1b47ab79 100644
--- a/packages/col/src/col.ts
+++ b/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')
       }
 
diff --git a/packages/col/src/row.ts b/packages/col/src/row.ts
index 283dc5a9e3..efec6d1e1e 100644
--- a/packages/col/src/row.ts
+++ b/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 = {