diff --git a/packages/drawer/src/main.vue b/packages/drawer/src/main.vue
index 87874f2c7f..b4b31764e6 100644
--- a/packages/drawer/src/main.vue
+++ b/packages/drawer/src/main.vue
@@ -136,7 +136,12 @@ export default {
         }
         this.prevActiveElement = document.activeElement;
       } else {
-        if (!this.closed) this.$emit('close');
+        if (!this.closed) {
+          this.$emit('close');
+          if (this.destroyOnClose === true) {
+            this.rendered = false;
+          }
+        }
         this.$nextTick(() => {
           if (this.prevActiveElement) {
             this.prevActiveElement.focus();
diff --git a/test/unit/specs/drawer.spec.js b/test/unit/specs/drawer.spec.js
index c8d1c3caf9..cb16178c8b 100644
--- a/test/unit/specs/drawer.spec.js
+++ b/test/unit/specs/drawer.spec.js
@@ -132,6 +132,30 @@ describe('Drawer', () => {
     expect(vm.$el.querySelector('.el-drawer__body')).not.to.exist;
   });
 
+  it('should destroy every child by visible change when destroy-on-close flag is true', async() => {
+    vm = createVue({
+      template: `
+        <el-drawer :title='title' :visible='visible' :append-to-body='true' :destroy-on-close='true' ref='drawer'>
+           <span>${content}</span>
+        </el-drawer>
+      `,
+      data() {
+        return {
+          title,
+          visible: true
+        };
+      }
+    });
+
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-drawer__body span').textContent).to.equal(
+      content
+    );
+    vm.visible = false;
+    await wait(400);
+    expect(vm.$el.querySelector('.el-drawer__body')).not.to.exist;
+  });
+
   it('should close dialog by clicking the close button', async() => {
     vm = createVue({
       template: `