diff --git a/src/components/drawer/drawer.vue b/src/components/drawer/drawer.vue
index 869c776..48e89f3 100644
--- a/src/components/drawer/drawer.vue
+++ b/src/components/drawer/drawer.vue
@@ -1,5 +1,27 @@
 <template>
-    <div></div>
+    <div v-transfer-dom :data-transfer="transfer">
+        <transition name="fade">
+            <div class="ivu-drawer-mask" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
+        </transition>
+        <div :class="wrapClasses" @click="handleWrapClick">
+            <transition name="fade">
+                <div class="ivu-drawer" :style="mainStyles" v-show="visible">
+                    <div :class="contentClasses" ref="content" :style="contentStyles">
+                        <a class="ivu-drawer-close" v-if="closable" @click="close">
+                            <slot name="close">
+                                <Icon type="ios-close"></Icon>
+                            </slot>
+                        </a>
+                        <div :class="[prefixCls + '-header']"
+                             @mousedown="handleMoveStart"
+                             v-if="showHead"
+                        ><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
+                        <div :class="[prefixCls + '-body']" :style="styles"><slot></slot></div>
+                    </div>
+                </div>
+            </transition>
+        </div>
+    </div>
 </template>
 <script>
     import Icon from '../icon';
@@ -61,15 +83,117 @@
                     return !this.$IVIEW || this.$IVIEW.transfer === '' ? true : this.$IVIEW.transfer;
                 }
             },
+            className: {
+                type: String
+            }
         },
         data () {
             return {
                 prefixCls: prefixCls,
                 visible: this.value,
+                wrapShow: false,
+                showHead: true,
             };
         },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}-wrap`,
+                    {
+                        [`${prefixCls}-hidden`]: !this.wrapShow,
+                        [`${this.className}`]: !!this.className,
+                        [`${prefixCls}-no-mask`]: !this.mask
+                    }
+                ];
+            },
+            mainStyles () {
+                let style = {};
+
+                const width = parseInt(this.width);
+
+                const styleWidth = {
+                    width: width <= 100 ? `${width}%` : `${width}px`
+                };
+
+                Object.assign(style, styleWidth);
+
+                return style;
+            },
+            contentClasses () {
+                return [
+                    `${prefixCls}-content`,
+                    {
+                        [`${prefixCls}-content-no-mask`]: !this.mask
+                    }
+                ];
+            },
+        },
         methods: {
+            close () {
+                this.visible = false;
+                this.$emit('input', false);
+                this.$emit('on-close');
+            },
+            handleMask () {
+                if (this.maskClosable && this.mask) {
+                    this.close();
+                }
+            },
+            handleWrapClick (event) {
+                // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
+                const className = event.target.getAttribute('class');
+                if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.handleMask();
+            },
+        },
+        mounted () {
+            if (this.visible) {
+                this.wrapShow = true;
+            }
+
+            let showHead = true;
 
+            if (this.$slots.header === undefined && !this.title) {
+                showHead = false;
+            }
+
+            this.showHead = showHead;
+        },
+        beforeDestroy () {
+            this.removeScrollEffect();
+        },
+        watch: {
+            value (val) {
+                this.visible = val;
+            },
+            visible (val) {
+                if (val === false) {
+                    this.timer = setTimeout(() => {
+                        this.wrapShow = false;
+                        this.removeScrollEffect();
+                    }, 300);
+                } else {
+                    if (this.timer) clearTimeout(this.timer);
+                    this.wrapShow = true;
+                    if (!this.scrollable) {
+                        this.addScrollEffect();
+                    }
+                }
+                this.broadcast('Table', 'on-visible-change', val);
+                this.broadcast('Slider', 'on-visible-change', val);  // #2852
+                this.$emit('on-visible-change', val);
+            },
+            scrollable (val) {
+                if (!val) {
+                    this.addScrollEffect();
+                } else {
+                    this.removeScrollEffect();
+                }
+            },
+            title (val) {
+                if (this.$slots.header === undefined) {
+                    this.showHead = !!val;
+                }
+            }
         }
     };
 </script>
\ No newline at end of file
diff --git a/src/components/modal/mixins-scrollbar.js b/src/components/modal/mixins-scrollbar.js
index 87f305d..f6ce263 100644
--- a/src/components/modal/mixins-scrollbar.js
+++ b/src/components/modal/mixins-scrollbar.js
@@ -1,4 +1,4 @@
-// used for Modal & $Spin
+// used for Modal & $Spin & Drawer
 import { getScrollBarSize } from '../../utils/assist';
 export default {
     methods: {
--
libgit2 0.21.4