From 1c1417f5368b97199287c0f22c614660ceb43ea6 Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Fri, 5 Aug 2016 17:02:01 +0800
Subject: [PATCH 01/12] update popover and tooltip

---
 examples/docs/popover.md                      | 22 ++---
 examples/docs/tooltip.md                      | 48 +++--------
 package.json                                  |  2 +-
 packages/popover/src/main.vue                 | 82 +++++++++----------
 .../theme-default/src/common/transition.css   |  7 +-
 packages/tooltip/src/main.vue                 | 23 +++---
 src/utils/vue-popper.js                       | 52 +++++++-----
 7 files changed, 115 insertions(+), 121 deletions(-)

diff --git a/examples/docs/popover.md b/examples/docs/popover.md
index b9973a8d4..788d9a923 100644
--- a/examples/docs/popover.md
+++ b/examples/docs/popover.md
@@ -117,7 +117,7 @@
 
 <div class="demo-box demo-popover">
   <el-popover
-    v-ref:popover1
+    ref="popover1"
     placement="top-start"
     title="标题"
     width="200"
@@ -126,7 +126,7 @@
   </el-popover>
 
   <el-popover
-    v-ref:popover2
+    ref="popover2"
     placement="bottom"
     title="标题"
     width="200"
@@ -135,7 +135,7 @@
   </el-popover>
 
   <el-popover
-    v-ref:popover3
+    ref="popover3"
     placement="right"
     title="标题"
     width="200"
@@ -146,13 +146,13 @@
   <el-button v-popover:popover1>hover 激活</el-button>
   <el-button v-popover:popover2>click 激活</el-button>
 
-  <el-input :value="model" v-popover:popover3 placeholder="focus 激活"></el-input>
+  <el-input v-model="model" v-popover:popover3 placeholder="focus 激活"></el-input>
 </div>
 
 
 ```html
 <el-popover
-  v-ref:popover1
+  ref="popover1"
   placement="top-start"
   title="标题"
   width="200"
@@ -161,7 +161,7 @@
 </el-popover>
 
 <el-popover
-  v-ref:popover2
+  ref="popover2"
   placement="bottom"
   title="标题"
   width="200"
@@ -170,7 +170,7 @@
 </el-popover>
 
 <el-popover
-  v-ref:popover3
+  ref="popover3"
   placement="right"
   title="标题"
   width="200"
@@ -188,7 +188,7 @@
 
 <div class="demo-box demo-popover">
   <el-popover
-    v-ref:popover4
+    ref="popover4"
     placement="right"
     width="400"
     trigger="click">
@@ -204,7 +204,7 @@
 
 ```html
 <el-popover
-  v-ref:popover4
+  ref="popover4"
   placement="right"
   width="400"
   trigger="click">
@@ -224,7 +224,7 @@
 
 <div class="demo-box demo-popover">
   <el-popover
-    v-ref:popover5
+    ref="popover5"
     placement="top"
     width="160"
     :visible.sync="visible2">
@@ -240,7 +240,7 @@
 
 ```html
 <el-popover
-  v-ref:popover5
+  ref="popover5"
   placement="top"
   width="160"
   :visible.sync="visible2">
diff --git a/examples/docs/tooltip.md b/examples/docs/tooltip.md
index f71433ecc..0f4ec16f9 100644
--- a/examples/docs/tooltip.md
+++ b/examples/docs/tooltip.md
@@ -30,73 +30,49 @@
   }
 </style>
 
-<script>
-  module.exports = {
-    data() {
-      return {
-        value: true
-      }
-    },
-
-    computed: {
-      effect() {
-        return this.value ? 'dark' : 'light';
-      }
-    }
-  }
-</script>
-
-<el-switch
-  v-model="value"
-  on-text="黑色"
-  off-text="白色"
-  on-color="#1f2d3d"
-  off-color="#ccc">
-</el-switch>
-
 <div class="box">
   <div class="top">
-    <el-tooltip class="item" :effect="effect" content="Top Left 提示文字" placement="top-start">
+    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
       <el-button>上左</el-button>
     </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Top Center 提示文字" placement="top">
+    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
       <el-button>上边</el-button>
     </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Top Right 提示文字" placement="top-end">
+    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
       <el-button>上右</el-button>
     </el-tooltip>
   </div>
   <div class="left">
-    <el-tooltip class="item" :effect="effect" content="Left Top 提示文字" placement="left-start">
+    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
       <el-button>左上</el-button>
     </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Left Center 提示文字" placement="left">
+    <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
       <el-button>左边</el-button>
     </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Left Bottom 提示文字" placement="left-end">
+    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
       <el-button>左下</el-button>
     </el-tooltip>
   </div>
 
   <div class="right">
-    <el-tooltip class="item" :effect="effect" content="Right Top 提示文字" placement="right-start">
+    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
       <el-button>右上</el-button>
     </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Right Center 提示文字" placement="right">
+    <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
       <el-button>右边</el-button>
     </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Right Bottom 提示文字" placement="right-end">
+    <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
       <el-button>右下</el-button>
     </el-tooltip>
   </div>
   <div class="bottom">
-    <el-tooltip class="item" :effect="effect" content="Bottom Left 提示文字" placement="bottom-start">
+    <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
       <el-button>下左</el-button>
     </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Bottom Center 提示文字" placement="bottom">
+    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
       <el-button>下边</el-button>
     </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Bottom Right 提示文字" placement="bottom-end">
+    <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
       <el-button>下右</el-button>
     </el-tooltip>
   </div>
diff --git a/package.json b/package.json
index 6fbf1a7d6..021c222ab 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "dev": "node bin/build-entry.js && cooking watch -c scripts/cooking.demo.js",
-    "dist": "rm -rf lib && cooking build -p && cooking build -c scripts/cooking.component.js -p",
+    "dist": "rm -rf lib && cooking build -c scripts/cooking.conf.js -p && cooking build -c scripts/cooking.component.js -p",
     "deploy": "cooking build -c scripts/cooking.demo.js -p",
     "gh-docs": "cooking build -c scripts/cooking.demo.js -p && gh-pages -d examples/element-ui --remote origin",
     "prepublish": "make dist"
diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue
index 1334b57d1..9e6c01dfc 100644
--- a/packages/popover/src/main.vue
+++ b/packages/popover/src/main.vue
@@ -1,13 +1,14 @@
 <template>
-  <div
-    class="el-popover"
-    v-el:popper
-    v-show="visible"
-    :transition="transition"
-    :style="{ width: width + 'px' }">
-    <div class="el-popover__title" v-if="title" v-text="title"></div>
-    <slot>{{ content }}</slot>
-  </div>
+  <transition :name="transition">
+    <div
+      class="el-popover"
+      ref="popper"
+      v-show="showPopper"
+      :style="{ width: width + 'px' }">
+      <div class="el-popover__title" v-if="title" v-text="title"></div>
+      <slot>{{ content }}</slot>
+    </div>
+  </transition>
 </template>
 
 <script>
@@ -16,10 +17,8 @@ import Vue from 'vue';
 import { on, off } from 'wind-dom/src/event';
 
 Vue.directive('popover', {
-  update() {
-    this.vm.$nextTick(() => {
-      this.vm.$refs[this.arg].reference = this.el;
-    });
+  bind(el, binding, vnode) {
+    vnode.context.$refs[binding.arg].$refs.reference = el;
   }
 });
 
@@ -36,9 +35,7 @@ export default {
     },
     title: String,
     content: String,
-    reference: {
-      default: 'body'
-    },
+    reference: {},
     width: {},
     visibleArrow: {
       default: true
@@ -56,61 +53,64 @@ export default {
     }
   },
 
-  ready() {
+  mounted() {
     let _timer;
+    const reference = this.reference || this.$refs.reference;
 
     this.$nextTick(() => {
       if (this.trigger === 'click') {
-        on(this.reference, 'click', () => { this.visible = !this.visible; });
+        on(reference, 'click', () => { this.showPopper = !this.showPopper; });
         on(document, 'click', (e) => {
           if (!this.$el ||
-              !this.reference ||
+              !reference ||
               this.$el.contains(e.target) ||
-              this.reference.contains(e.target)) return;
-          this.visible = false;
+              reference.contains(e.target)) return;
+          this.showPopper = false;
         });
       } else if (this.trigger === 'hover') {
-        on(this.reference, 'mouseenter', () => {
-          this.visible = true;
+        on(reference, 'mouseenter', () => {
+          this.showPopper = true;
           clearTimeout(_timer);
         });
-        on(this.reference, 'mouseleave', () => {
+        on(reference, 'mouseleave', () => {
           _timer = setTimeout(() => {
-            this.visible = false;
+            this.showPopper = false;
           }, 200);
         });
       } else {
-        if (this.reference.hasChildNodes()) {
-          const children = this.reference.childNodes;
+        if (reference.hasChildNodes()) {
+          const children = reference.childNodes;
 
           for (let i = 0; i < children.length; i++) {
             if (children[i].nodeName === 'INPUT') {
-              on(children[i], 'focus', () => { this.visible = true; });
-              on(children[i], 'blur', () => { this.visible = false; });
+              on(children[i], 'focus', () => { this.showPopper = true; });
+              on(children[i], 'blur', () => { this.showPopper = false; });
               break;
             }
           }
         } else if (
-            this.reference.nodeName === 'INPUT' ||
-            this.reference.nodeName === 'TEXTAREA'
+            reference.nodeName === 'INPUT' ||
+            reference.nodeName === 'TEXTAREA'
           ) {
-          on(this.reference, 'focus', () => { this.visible = true; });
-          on(this.reference, 'blur', () => { this.visible = false; });
+          on(reference, 'focus', () => { this.showPopper = true; });
+          on(reference, 'blur', () => { this.showPopper = false; });
         } else {
-          on(this.reference, 'mousedown', () => { this.visible = true; });
-          on(this.reference, 'mouseup', () => { this.visible = false; });
+          on(reference, 'mousedown', () => { this.showPopper = true; });
+          on(reference, 'mouseup', () => { this.showPopper = false; });
         }
       }
     });
   },
 
   destroyed() {
-    off(this.reference, 'mouseup');
-    off(this.reference, 'mousedown');
-    off(this.reference, 'focus');
-    off(this.reference, 'blur');
-    off(this.reference, 'mouseleave');
-    off(this.reference, 'mouseenter');
+    const reference = this.reference || this.$refs.reference;
+
+    off(reference, 'mouseup');
+    off(reference, 'mousedown');
+    off(reference, 'focus');
+    off(reference, 'blur');
+    off(reference, 'mouseleave');
+    off(reference, 'mouseenter');
   }
 };
 </script>
diff --git a/packages/theme-default/src/common/transition.css b/packages/theme-default/src/common/transition.css
index 09e0f4cc8..4c4f65eca 100644
--- a/packages/theme-default/src/common/transition.css
+++ b/packages/theme-default/src/common/transition.css
@@ -6,11 +6,16 @@
   transition: var(--fade-transition);
 }
 
-.fade-in-linear-transition {
+.fade-in-linear-enter-active {
   opacity: 1;
   transition: var(--fade-linear-transition);
 }
 
+.fade-in-linear-leave-active {
+  opacity: 0;
+  transition: var(--fade-linear-transition);
+}
+
 .fade-in-enter,
 .fade-in-leave,
 .fade-in-linear-enter,
diff --git a/packages/tooltip/src/main.vue b/packages/tooltip/src/main.vue
index 6d71b3521..af9e1bcc9 100644
--- a/packages/tooltip/src/main.vue
+++ b/packages/tooltip/src/main.vue
@@ -1,20 +1,21 @@
 <template>
   <div
     class="el-tooltip"
-    @mouseenter="visible = true"
-    @mouseleave="visible = false">
-    <div class="el-tooltip__rel" v-el:reference>
+    @mouseenter="showPopper = true"
+    @mouseleave="showPopper = false">
+    <div class="el-tooltip__rel" ref="reference">
       <slot></slot>
     </div>
 
-    <div
-      class="el-tooltip__popper"
-      :class="['is-' + effect]"
-      v-el:popper
-      v-show="!disabled && visible"
-      :transition="transition">
-      <slot name="content"><div v-text="content"></div></slot>
-    </div>
+    <transition :name="transition">
+      <div
+        class="el-tooltip__popper"
+        :class="['is-' + effect]"
+        ref="popper"
+        v-show="!disabled && showPopper">
+        <slot name="content"><div v-text="content"></div></slot>
+      </div>
+    </transition>
   </div>
 </template>
 
diff --git a/src/utils/vue-popper.js b/src/utils/vue-popper.js
index 984229d92..57f763876 100644
--- a/src/utils/vue-popper.js
+++ b/src/utils/vue-popper.js
@@ -34,9 +34,21 @@ export default {
     }
   },
 
+  data() {
+    return {
+      showPopper: false
+    };
+  },
+
   watch: {
-    'visible'(val) {
-      if (this.popperDestroying) return;
+    visible: {
+      immediate: true,
+      handler(val) {
+        this.showPopper = val;
+      }
+    },
+
+    showPopper(val) {
       val ? this.updatePopper() : this.destroyPopper();
     }
   },
@@ -47,32 +59,32 @@ export default {
         return;
       }
 
-      this.popper = this.popper || this.$refs.popper;
-      this.reference = this.reference || this.$refs.reference;
-
-      if (!this.popper || !this.reference) {
-        return;
-      }
+      const options = this.options;
+      const popper = this.popper || this.$refs.popper;
+      const reference = this.reference || this.$refs.reference;
 
+      if (!popper || !reference) return;
       if (this.visibleArrow) {
-        this.appendArrow(this.popper);
+        this.appendArrow(popper);
       }
 
       if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
         this.popperJS.destroy();
       }
 
-      this.$set('options.placement', this.placement);
-      this.$set('options.offset', this.offset);
+      options.placement = this.placement;
+      options.offset = this.offset;
 
-      this.popperJS = new PopperJS(
-        this.reference,
-        this.popper,
-        this.options
-      );
-      this.popperJS.onCreate(popper => {
-        this.resetTransformOrigin(popper);
-        this.$emit('created', this);
+      this.$nextTick(() => {
+        this.popperJS = new PopperJS(
+          reference,
+          popper,
+          options
+        );
+        this.popperJS.onCreate(popper => {
+          this.resetTransformOrigin(popper);
+          this.$emit('created', this);
+        });
       });
     },
 
@@ -85,7 +97,7 @@ export default {
     },
 
     doDestroy() {
-      if (this.visible) return;
+      if (this.showPopper) return;
 
       this.popperJS._popper.removeEventListener('transitionend', this.doDestroy);
       this.popperJS.destroy();

From 4e46e55e1199414106e15ab54dd7915905a201d2 Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Fri, 5 Aug 2016 17:41:08 +0800
Subject: [PATCH 02/12] Optimized code

---
 packages/popover/src/main.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue
index 9e6c01dfc..949b3ec73 100644
--- a/packages/popover/src/main.vue
+++ b/packages/popover/src/main.vue
@@ -78,7 +78,7 @@ export default {
           }, 200);
         });
       } else {
-        if (reference.hasChildNodes()) {
+        if ([].slice.call(reference.children).length) {
           const children = reference.childNodes;
 
           for (let i = 0; i < children.length; i++) {

From ca59b2101112d24bda4395cf5b10da43722c1656 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Mon, 8 Aug 2016 13:59:26 +0800
Subject: [PATCH 03/12] update dialog

---
 examples/docs/dialog.md               | 82 +++++++++++++++------------
 package.json                          |  2 +-
 packages/dialog/package.json          |  2 +-
 packages/dialog/src/component.vue     | 35 +++++++-----
 packages/theme-default/src/dialog.css |  9 +--
 5 files changed, 73 insertions(+), 57 deletions(-)

diff --git a/examples/docs/dialog.md b/examples/docs/dialog.md
index 4fd9b7138..c6da7875b 100644
--- a/examples/docs/dialog.md
+++ b/examples/docs/dialog.md
@@ -60,96 +60,106 @@
 
 ## 基本用法
 
-<el-button :plain="true" v-on:click="dialogVisible = true">点击打开 Dialog</el-button>
+<el-button :plain="true" v-on:click.native="dialogVisible = true">点击打开 Dialog</el-button>
 
 <div class="demo-box demo-dialog">
-  <el-dialog title="提示" :visible.sync="dialogVisible">
+  <el-dialog title="提示" :visible="dialogVisible" @open="dialogVisible = true" @close="dialogVisible = false">
     <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
-      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      <el-button @click.native="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
     </span>
   </el-dialog>
 </div>
 
 ```html
-<el-button :plain="true" v-on:click="openDialog">点击打开 Dialog</el-button>
+<el-button :plain="true" v-on:click.native="dialogVisible = true">点击打开 Dialog</el-button>
 
-<el-dialog title="提示" :visible.sync="dialogVisible">
+<el-dialog title="提示" :visible="dialogVisible" @open="dialogVisible = true" @close="dialogVisible = false">
   <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
   <span slot="footer" class="dialog-footer">
-    <el-button @click="dialogVisible = false">取 消</el-button>
-    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+    <el-button @click.native="dialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
   </span>
 </el-dialog>
 ```
 
 ## 设置尺寸
 
-<el-button :plain="true" v-on:click="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
+<el-button :plain="true" v-on:click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
 
 <div class="demo-box demo-dialog">
-  <el-dialog title="提示" :visible.sync="dialogTinyVisible" size="tiny">
+  <el-dialog title="提示" :visible="dialogTinyVisible" size="tiny" @open="dialogTinyVisible = true" @close="dialogTinyVisible = false">
     <span>这是一段内容</span>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogTinyVisible = false">取 消</el-button>
-      <el-button type="primary" @click="dialogTinyVisible = false">确 定</el-button>
+      <el-button @click.native="dialogTinyVisible = false">取 消</el-button>
+      <el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
     </span>
   </el-dialog>
 </div>
 
 ```html
-<el-button :plain="true" v-on:click="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
+<el-button :plain="true" v-on:click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
 
-<el-dialog title="提示" :visible.sync="dialogTinyVisible" size="tiny">
+<el-dialog title="提示" :visible="dialogTinyVisible" size="tiny" @open="dialogTinyVisible = true" @close="dialogTinyVisible = false">
   <span>这是一段内容</span>
   <span slot="footer" class="dialog-footer">
-    <el-button @click="dialogTinyVisible = false">取 消</el-button>
-    <el-button type="primary" @click="dialogTinyVisible = false">确 定</el-button>
+    <el-button @click.native="dialogTinyVisible = false">取 消</el-button>
+    <el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
   </span>
 </el-dialog>
 ```
 
-<el-button v-on:click="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
+<el-button v-on:click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
 
 <div class="demo-box demo-dialog">
-  <el-dialog title="提示" :visible.sync="dialogFullVisible" size="full">
+  <el-dialog title="提示" :visible="dialogFullVisible" size="full" @open="dialogFullVisible = true" @close="dialogFullVisible = false">
     <img src="http://placekitten.com/1920/1280" class="full-image">
   </el-dialog>
 </div>
 
 ```html
-<el-button v-on:click="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
+<el-button v-on:click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
 
-<el-dialog title="提示" :visible.sync="dialogFullVisible" size="full">
+<el-dialog title="提示" :visible="dialogFullVisible" size="full" @open="dialogFullVisible = true" @close="dialogFullVisible = false">
   <img src="http://placekitten.com/1920/1280">
 </el-dialog>
 ```
 
 ## 设置能否通过点击modal或按下esc关闭dialog
 
-<el-button v-on:click="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
+<el-button v-on:click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
 
 <div class="demo-box demo-dialog">
-  <el-dialog title="提示" :visible.sync="dialogStubbornVisible" :close-on-click-modal="false" :close-on-press-escape="false">
+  <el-dialog title="提示"
+    :visible="dialogStubbornVisible"
+    @open="dialogStubbornVisible = true"
+    @close="dialogStubbornVisible = false"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false">
     <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
   </el-dialog>
 </div>
 
 ```html
-<el-button v-on:click="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
+<el-button v-on:click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
 
-<el-dialog title="提示" :visible.sync="dialogStubbornVisible" :close-on-click-modal="false" :close-on-press-escape="false">
+<el-dialog title="提示"
+  :visible="dialogStubbornVisible"
+  @open="dialogStubbornVisible = true"
+  @close="dialogStubbornVisible = false"
+  :close-on-click-modal="false"
+  :close-on-press-escape="false">
   <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
 </el-dialog>
 ```
 
 ## 自定义内容
 
-<el-button v-on:click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
+<el-button v-on:click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
 
 <div class="demo-box demo-dialog">
-  <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
+  <el-dialog title="收货地址" :visible="dialogTableVisible" @open="dialogTableVisible = true" @close="dialogTableVisible = false">
     <el-table :data="gridData">
       <el-table-column property="date" label="日期" width="150"></el-table-column>
       <el-table-column property="name" label="姓名" width="200"></el-table-column>
@@ -158,10 +168,10 @@
   </el-dialog>
 </div>
 
-<el-button v-on:click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
+<el-button v-on:click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
 
 <div class="demo-box demo-dialog">
-  <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
+  <el-dialog title="收货地址" :visible="dialogFormVisible" @open="dialogFormVisible = true" @close="dialogFormVisible = false">
     <el-form :models="form" v-ref:form>
       <el-form-item label="活动名称" :label-width="formLabelWidth">
         <el-input :model.sync="form.name" auto-complete="off"></el-input>
@@ -174,16 +184,16 @@
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogFormVisible = false">取 消</el-button>
-      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+      <el-button @click.native="dialogFormVisible = false">取 消</el-button>
+      <el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
     </span>
   </el-dialog>
 </div>
 
 ```html
-<el-button v-on:click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
+<el-button v-on:click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
 
-<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
+<el-dialog title="收货地址" :visible="dialogTableVisible" @open="dialogTableVisible = true" @close="dialogTableVisible = false">
   <el-table :data="gridData">
     <el-table-column property="date" label="日期" width="150"></el-table-column>
     <el-table-column property="name" label="姓名" width="200"></el-table-column>
@@ -191,9 +201,9 @@
   </el-table>
 </el-dialog>
 
-<el-button v-on:click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
+<el-button v-on:click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
 
-<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
+<el-dialog title="收货地址" :visible="dialogFormVisible" @open="dialogFormVisible = true" @close="dialogFormVisible = false">
   <el-form :models="form" v-ref:form>
     <el-form-item label="活动名称" :label-width="formLabelWidth">
       <el-input :model.sync="form.name" auto-complete="off"></el-input>
@@ -206,8 +216,8 @@
     </el-form-item>
   </el-form>
   <span slot="footer" class="dialog-footer">
-    <el-button @click="dialogFormVisible = false">取 消</el-button>
-    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+    <el-button @click.native="dialogFormVisible = false">取 消</el-button>
+    <el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
   </span>
 </el-dialog>
 ```
diff --git a/package.json b/package.json
index 6fbf1a7d6..5ea46b612 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "vue": "^2.0.0-beta.5",
     "vue-loader": "^9.2.3",
     "vue-markdown-loader": "^0.4.0",
-    "vue-popup": "^0.1.8",
+    "vue-popup": "^0.2.0",
     "vue-router": "^2.0.0-beta.2"
   }
 }
diff --git a/packages/dialog/package.json b/packages/dialog/package.json
index 32e0c41d9..97aa9482b 100644
--- a/packages/dialog/package.json
+++ b/packages/dialog/package.json
@@ -12,6 +12,6 @@
   "author": "elemefe",
   "license": "MIT",
   "devDependencies": {
-    "vue-popup": "^0.1.8"
+    "vue-popup": "^0.2.0"
   }
 }
diff --git a/packages/dialog/src/component.vue b/packages/dialog/src/component.vue
index 0aa3f3db8..28dc92f41 100644
--- a/packages/dialog/src/component.vue
+++ b/packages/dialog/src/component.vue
@@ -1,16 +1,20 @@
 <template>
-  <div class="el-dialog__wrapper" v-if="visible" transition="dialog-fade" @click.self="handleWrapperClick">
-    <div class="el-dialog" :class="[sizeClass, customClass]" v-el:dialog :style="{ 'margin-bottom': size !== 'full' ? '50px' : '', 'top': size !== 'full' ? dynamicTop + 'px' : '0' }">
-      <div class="el-dialog__header">
-        <span class="el-dialog__title">{{title}}</span>
-        <div class="el-dialog__headerbtn">
-          <i class="el-dialog__close el-icon el-icon-close" @click='close()'></i>
+  <transition name="dialog-fade">
+    <div class="el-dialog__wrapper" v-show="visible" @click.self="handleWrapperClick">
+      <div class="el-dialog" :class="[sizeClass, customClass]" ref="dialog" :style="{ 'margin-bottom': size !== 'full' ? '50px' : '', 'top': size !== 'full' ? dynamicTop + 'px' : '0' }">
+        <div class="el-dialog__header">
+          <span class="el-dialog__title">{{title}}</span>
+          <div class="el-dialog__headerbtn">
+            <i class="el-dialog__close el-icon el-icon-close" @click='close()'></i>
+          </div>
+        </div>
+        <div class="el-dialog__body"><slot></slot></div>
+        <div class="el-dialog__footer">
+          <slot name="footer"></slot>
         </div>
       </div>
-      <div class="el-dialog__body"><slot></slot></div>
-      <slot name="footer"></slot>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script>
@@ -60,9 +64,14 @@
     },
 
     watch: {
-      visible(val) {
+      computedVisible(val) {
         if (val) {
-          this.$els.dialog.scrollTop = 0;
+          this.$emit('open');
+          this.$nextTick(() => {
+            this.$refs.dialog.scrollTop = 0;
+          });
+        } else {
+          this.$emit('close');
         }
       }
     },
@@ -76,7 +85,7 @@
     methods: {
       handleWrapperClick() {
         if (this.closeOnClickModal) {
-          this.visible = false;
+          this.computedVisible = false;
         }
       },
 
@@ -85,7 +94,7 @@
       }
     },
 
-    ready() {
+    mounted() {
       if (this.visible) {
         this.rendered = true;
         this.open();
diff --git a/packages/theme-default/src/dialog.css b/packages/theme-default/src/dialog.css
index ec4ad7c59..f49a57043 100644
--- a/packages/theme-default/src/dialog.css
+++ b/packages/theme-default/src/dialog.css
@@ -8,7 +8,6 @@
     position: relative;
     margin-left: auto;
     margin-right: auto;
-    overflow: hidden;
     background: #fff;
     border-radius: 2px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -69,20 +68,18 @@
       float: right;
     }
 
-    & *[slot=footer] {
+    @e footer {
       padding: 10px 20px 15px;
       text-align: right;
-      width: 100%;
-      display: block;
       box-sizing: border-box;
     }
   }
 
-  .dialog-fade-enter {
+  .dialog-fade-enter-active {
     animation: dialog-fade-in .3s;
   }
 
-  .dialog-fade-leave {
+  .dialog-fade-leave-active {
     animation: dialog-fade-out .3s;
   }
 

From 67ea53062ef4e1bdf9a5267e3c57e7c64c3e9514 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Mon, 8 Aug 2016 17:22:21 +0800
Subject: [PATCH 04/12] apply v-model in el-dialog

---
 examples/docs/dialog.md           | 39 +++++++++++++++++--------------
 package.json                      |  2 +-
 packages/dialog/package.json      |  2 +-
 packages/dialog/src/component.vue |  8 +++----
 4 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/examples/docs/dialog.md b/examples/docs/dialog.md
index c6da7875b..f8604a4ed 100644
--- a/examples/docs/dialog.md
+++ b/examples/docs/dialog.md
@@ -63,7 +63,7 @@
 <el-button :plain="true" v-on:click.native="dialogVisible = true">点击打开 Dialog</el-button>
 
 <div class="demo-box demo-dialog">
-  <el-dialog title="提示" :visible="dialogVisible" @open="dialogVisible = true" @close="dialogVisible = false">
+  <el-dialog title="提示" v-model="dialogVisible">
     <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
     <span slot="footer" class="dialog-footer">
       <el-button @click.native="dialogVisible = false">取 消</el-button>
@@ -75,7 +75,7 @@
 ```html
 <el-button :plain="true" v-on:click.native="dialogVisible = true">点击打开 Dialog</el-button>
 
-<el-dialog title="提示" :visible="dialogVisible" @open="dialogVisible = true" @close="dialogVisible = false">
+<el-dialog title="提示" v-model="dialogVisible">
   <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
   <span slot="footer" class="dialog-footer">
     <el-button @click.native="dialogVisible = false">取 消</el-button>
@@ -89,7 +89,7 @@
 <el-button :plain="true" v-on:click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
 
 <div class="demo-box demo-dialog">
-  <el-dialog title="提示" :visible="dialogTinyVisible" size="tiny" @open="dialogTinyVisible = true" @close="dialogTinyVisible = false">
+  <el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
     <span>这是一段内容</span>
     <span slot="footer" class="dialog-footer">
       <el-button @click.native="dialogTinyVisible = false">取 消</el-button>
@@ -101,7 +101,7 @@
 ```html
 <el-button :plain="true" v-on:click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
 
-<el-dialog title="提示" :visible="dialogTinyVisible" size="tiny" @open="dialogTinyVisible = true" @close="dialogTinyVisible = false">
+<el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
   <span>这是一段内容</span>
   <span slot="footer" class="dialog-footer">
     <el-button @click.native="dialogTinyVisible = false">取 消</el-button>
@@ -113,7 +113,7 @@
 <el-button v-on:click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
 
 <div class="demo-box demo-dialog">
-  <el-dialog title="提示" :visible="dialogFullVisible" size="full" @open="dialogFullVisible = true" @close="dialogFullVisible = false">
+  <el-dialog title="提示" v-model="dialogFullVisible" size="full">
     <img src="http://placekitten.com/1920/1280" class="full-image">
   </el-dialog>
 </div>
@@ -121,7 +121,7 @@
 ```html
 <el-button v-on:click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
 
-<el-dialog title="提示" :visible="dialogFullVisible" size="full" @open="dialogFullVisible = true" @close="dialogFullVisible = false">
+<el-dialog title="提示" v-model="dialogFullVisible" size="full">
   <img src="http://placekitten.com/1920/1280">
 </el-dialog>
 ```
@@ -132,9 +132,7 @@
 
 <div class="demo-box demo-dialog">
   <el-dialog title="提示"
-    :visible="dialogStubbornVisible"
-    @open="dialogStubbornVisible = true"
-    @close="dialogStubbornVisible = false"
+    v-model="dialogStubbornVisible"
     :close-on-click-modal="false"
     :close-on-press-escape="false">
     <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
@@ -145,9 +143,7 @@
 <el-button v-on:click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
 
 <el-dialog title="提示"
-  :visible="dialogStubbornVisible"
-  @open="dialogStubbornVisible = true"
-  @close="dialogStubbornVisible = false"
+  v-model="dialogStubbornVisible"
   :close-on-click-modal="false"
   :close-on-press-escape="false">
   <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
@@ -159,7 +155,7 @@
 <el-button v-on:click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
 
 <div class="demo-box demo-dialog">
-  <el-dialog title="收货地址" :visible="dialogTableVisible" @open="dialogTableVisible = true" @close="dialogTableVisible = false">
+  <el-dialog title="收货地址" v-model="dialogTableVisible">
     <el-table :data="gridData">
       <el-table-column property="date" label="日期" width="150"></el-table-column>
       <el-table-column property="name" label="姓名" width="200"></el-table-column>
@@ -171,8 +167,8 @@
 <el-button v-on:click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
 
 <div class="demo-box demo-dialog">
-  <el-dialog title="收货地址" :visible="dialogFormVisible" @open="dialogFormVisible = true" @close="dialogFormVisible = false">
-    <el-form :models="form" v-ref:form>
+  <el-dialog title="收货地址" v-model="dialogFormVisible">
+    <el-form :models="form">
       <el-form-item label="活动名称" :label-width="formLabelWidth">
         <el-input :model.sync="form.name" auto-complete="off"></el-input>
       </el-form-item>
@@ -193,7 +189,7 @@
 ```html
 <el-button v-on:click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
 
-<el-dialog title="收货地址" :visible="dialogTableVisible" @open="dialogTableVisible = true" @close="dialogTableVisible = false">
+<el-dialog title="收货地址" v-model="dialogTableVisible">
   <el-table :data="gridData">
     <el-table-column property="date" label="日期" width="150"></el-table-column>
     <el-table-column property="name" label="姓名" width="200"></el-table-column>
@@ -203,8 +199,8 @@
 
 <el-button v-on:click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
 
-<el-dialog title="收货地址" :visible="dialogFormVisible" @open="dialogFormVisible = true" @close="dialogFormVisible = false">
-  <el-form :models="form" v-ref:form>
+<el-dialog title="收货地址" v-model="dialogFormVisible">
+  <el-form :models="form">
     <el-form-item label="活动名称" :label-width="formLabelWidth">
       <el-input :model.sync="form.name" auto-complete="off"></el-input>
     </el-form-item>
@@ -236,3 +232,10 @@
 |------|--------|
 | - | dialog 的内容 |
 | footer | dialog 按钮操作区的内容 |
+
+## 方法
+每个 el-dialog 实例都暴露了如下方法，用于在不使用 v-model 的情况下打开 / 关闭实例：
+| 方法名 | 说明 |
+|------|--------|
+| open | 打开当前实例 |
+| close | 关闭当前实例 |
diff --git a/package.json b/package.json
index 5ea46b612..14d06cf2c 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "vue": "^2.0.0-beta.5",
     "vue-loader": "^9.2.3",
     "vue-markdown-loader": "^0.4.0",
-    "vue-popup": "^0.2.0",
+    "vue-popup": "^0.2.1",
     "vue-router": "^2.0.0-beta.2"
   }
 }
diff --git a/packages/dialog/package.json b/packages/dialog/package.json
index 97aa9482b..a223e6050 100644
--- a/packages/dialog/package.json
+++ b/packages/dialog/package.json
@@ -12,6 +12,6 @@
   "author": "elemefe",
   "license": "MIT",
   "devDependencies": {
-    "vue-popup": "^0.2.0"
+    "vue-popup": "^0.2.1"
   }
 }
diff --git a/packages/dialog/src/component.vue b/packages/dialog/src/component.vue
index 28dc92f41..a522a848b 100644
--- a/packages/dialog/src/component.vue
+++ b/packages/dialog/src/component.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="dialog-fade">
-    <div class="el-dialog__wrapper" v-show="visible" @click.self="handleWrapperClick">
+    <div class="el-dialog__wrapper" v-show="value" @click.self="handleWrapperClick">
       <div class="el-dialog" :class="[sizeClass, customClass]" ref="dialog" :style="{ 'margin-bottom': size !== 'full' ? '50px' : '', 'top': size !== 'full' ? dynamicTop + 'px' : '0' }">
         <div class="el-dialog__header">
           <span class="el-dialog__title">{{title}}</span>
@@ -64,7 +64,7 @@
     },
 
     watch: {
-      computedVisible(val) {
+      value(val) {
         if (val) {
           this.$emit('open');
           this.$nextTick(() => {
@@ -85,7 +85,7 @@
     methods: {
       handleWrapperClick() {
         if (this.closeOnClickModal) {
-          this.computedVisible = false;
+          this.$emit('input', false);
         }
       },
 
@@ -95,7 +95,7 @@
     },
 
     mounted() {
-      if (this.visible) {
+      if (this.value) {
         this.rendered = true;
         this.open();
       }

From 08fd95571ffa1561cc6c182b2758a2e487616f44 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Wed, 10 Aug 2016 18:11:56 +0800
Subject: [PATCH 05/12] update msgbox

---
 examples/docs/message-box.md               | 24 ++++-----
 packages/message-box/package.json          |  2 +-
 packages/message-box/src/main.js           | 13 +++--
 packages/message-box/src/main.vue          | 59 ++++++++++++++--------
 packages/theme-default/src/message-box.css |  4 +-
 5 files changed, 61 insertions(+), 41 deletions(-)

diff --git a/examples/docs/message-box.md b/examples/docs/message-box.md
index bc3ed37e3..58ae7a845 100644
--- a/examples/docs/message-box.md
+++ b/examples/docs/message-box.md
@@ -65,11 +65,11 @@
 </script>
 
 ## 基本用法
-<el-button @click="open">打开 Alert</el-button>
+<el-button @click.native="open">打开 Alert</el-button>
 
 ```html
 <template>
-  <el-button @click="open">打开 Message Box</el-button>
+  <el-button @click.native="open">打开 Message Box</el-button>
 </template>
 
 <script>
@@ -85,11 +85,11 @@
 
 ## 返回 Promise
 
-<el-button @click="open2">打开 alert</el-button>
+<el-button @click.native="open2">打开 alert</el-button>
 
 ```html
 <template>
-  <el-button @click="open4">打开 alert</el-button>
+  <el-button @click.native="open2">打开 alert</el-button>
 </template>
 
 <script>
@@ -105,11 +105,11 @@
 </script>
 ```
 
-<el-button @click="open3">打开 confirm</el-button>
+<el-button @click.native="open3">打开 confirm</el-button>
 
 ```html
 <template>
-  <el-button @click="open5">打开 confirm</el-button>
+  <el-button @click.native="open3">打开 confirm</el-button>
 </template>
 
 <script>
@@ -132,11 +132,11 @@
   }
 </script>
 ```
-<el-button @click="open4">打开 prompt</el-button>
+<el-button @click.native="open4">打开 prompt</el-button>
 
 ```html
 <template>
-  <el-button @click="open6">打开 prompt</el-button>
+  <el-button @click.native="open4">打开 prompt</el-button>
 </template>
 
 <script>
@@ -157,11 +157,11 @@
 </script>
 ```
 
-<el-button @click="open5">打开 Message Box</el-button>
+<el-button @click.native="open5">打开 Message Box</el-button>
 
 ```html
 <template>
-  <el-button @click="open3">打开 Message Box</el-button>
+  <el-button @click.native="open5">打开 Message Box</el-button>
 </template>
 
 <script>
@@ -183,11 +183,11 @@
 
 ## 更多配置项
 
-<el-button @click="open6">打开 Message Box</el-button>
+<el-button @click.native="open6">打开 Message Box</el-button>
 
 ```html
 <template>
-  <el-button @click="open2">打开 Message Box</el-button>
+  <el-button @click.native="open6">打开 Message Box</el-button>
 </template>
 
 <script>
diff --git a/packages/message-box/package.json b/packages/message-box/package.json
index 75e7f42f3..1d36034cf 100644
--- a/packages/message-box/package.json
+++ b/packages/message-box/package.json
@@ -12,6 +12,6 @@
   "author": "elemefe",
   "license": "MIT",
   "dependencies": {
-    "vue-popup": "^0.1.8"
+    "vue-popup": "^0.2.1"
   }
 }
diff --git a/packages/message-box/src/main.js b/packages/message-box/src/main.js
index ec38a877e..cfb4bf12b 100644
--- a/packages/message-box/src/main.js
+++ b/packages/message-box/src/main.js
@@ -88,7 +88,7 @@ var showNextMsg = function() {
     initInstance();
   }
 
-  if (!instance.visible || instance.closeTimer) {
+  if (!instance.value || instance.closeTimer) {
     if (msgQueue.length > 0) {
       currentMsg = msgQueue.shift();
 
@@ -98,10 +98,15 @@ var showNextMsg = function() {
           instance[prop] = options[prop];
         }
       }
-      instance.$appendTo(document.body);
+      ['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape'].forEach(prop => {
+        if (instance[prop] === undefined) {
+          instance[prop] = true;
+        }
+      });
+      document.body.appendChild(instance.$el);
 
       Vue.nextTick(() => {
-        instance.visible = true;
+        instance.value = true;
       });
     }
   }
@@ -188,7 +193,7 @@ MessageBox.prompt = function(message, title, options) {
 };
 
 MessageBox.close = function() {
-  instance.visible = false;
+  instance.value = false;
   msgQueue = [];
   currentMsg = null;
 };
diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue
index 6fffb8c18..4463d9cd1 100644
--- a/packages/message-box/src/main.vue
+++ b/packages/message-box/src/main.vue
@@ -1,23 +1,25 @@
 <template>
   <div class="el-message-box__wrapper">
-    <div class="el-message-box" v-if="rendered" v-show="visible" transition="msgbox-bounce">
-      <div class="el-message-box__header" v-if="title !== ''">
-        <div class="el-message-box__title">{{ title }}</div>
-        <i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
-      </div>
-      <div class="el-message-box__content" v-if="message !== ''">
-        <div class="el-message-box__status {{ typeClass }}"></div>
-        <div class="el-message-box__message" :style="{ 'margin-left': type ? '50px' : '0' }"><p>{{ message }}</p></div>
-        <div class="el-message-box__input" v-show="showInput">
-          <input type="text" v-model="inputValue" :placeholder="inputPlaceholder" v-el:input />
-          <div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{editorErrorMessage}}</div>
+    <transition name="msgbox-bounce">
+      <div class="el-message-box" v-show="value">
+        <div class="el-message-box__header" v-if="title !== ''">
+          <div class="el-message-box__title">{{ title }}</div>
+          <i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
+        </div>
+        <div class="el-message-box__content" v-if="message !== ''">
+          <div class="el-message-box__status" :class="[ typeClass ]"></div>
+          <div class="el-message-box__message" :style="{ 'margin-left': type ? '50px' : '0' }"><p>{{ message }}</p></div>
+          <div class="el-message-box__input" v-show="showInput">
+            <input type="text" v-model="inputValue" :placeholder="inputPlaceholder" ref="input" />
+            <div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{editorErrorMessage}}</div>
+          </div>
+        </div>
+        <div class="el-message-box__btns">
+          <el-button :class="[ cancelButtonClasses ]" v-show="showCancelButton" @click.native="handleAction('cancel')">{{ cancelButtonText }}</el-button>
+          <el-button :class="[ confirmButtonClasses ]" v-show="showConfirmButton" @click.native="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button>
         </div>
       </div>
-      <div class="el-message-box__btns">
-        <el-button class="{{ cancelButtonClasses }}" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</el-button>
-        <el-button class="{{ confirmButtonClasses }}" v-show="showConfirmButton" @click="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button>
-      </div>
-    </div>
+    </transition>
   </div>
 </template>
 
@@ -34,8 +36,6 @@
   import Popup from 'vue-popup';
 
   export default {
-    name: 'el-message-box',
-
     mixins: [ Popup ],
 
     props: {
@@ -68,12 +68,27 @@
     },
 
     methods: {
+      doClose() {
+        this.value = false;
+        this._closing = true;
+
+        this.onClose && this.onClose();
+
+        if (this.modal) {
+          document.body.style.overflow = this.bodyOverflow;
+        }
+
+        if (!this.transition) {
+          this.doAfterClose();
+        }
+      },
+
       handleAction(action) {
         if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {
           return;
         }
         var callback = this.callback;
-        this.visible = false;
+        this.value = false;
         callback(action);
       },
 
@@ -109,11 +124,11 @@
         }
       },
 
-      visible(val) {
+      value(val) {
         if (val && this.$type === 'prompt') {
           setTimeout(() => {
-            if (this.$els.input) {
-              this.$els.input.focus();
+            if (this.$refs.input) {
+              this.$refs.input.focus();
             }
           }, 500);
         }
diff --git a/packages/theme-default/src/message-box.css b/packages/theme-default/src/message-box.css
index cd19cc41a..bcb3dfc98 100644
--- a/packages/theme-default/src/message-box.css
+++ b/packages/theme-default/src/message-box.css
@@ -115,12 +115,12 @@
   }
 }
 
-.msgbox-bounce-enter {
+.msgbox-bounce-enter-active {
   -webkit-animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
   animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
 }
 
-.msgbox-bounce-leave {
+.msgbox-bounce-leave-active {
   -webkit-animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
   animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
 }

From dcffbbbe0d37069006cd77ea799fcd2d647266da Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Thu, 11 Aug 2016 10:40:34 +0800
Subject: [PATCH 06/12] update alert and notification

---
 examples/docs/notification.md               | 28 ++++++++++----------
 packages/alert/src/main.vue                 | 20 +++++++++-----
 packages/notification/src/main.js           |  5 ++--
 packages/notification/src/main.vue          | 29 ++++++++++++---------
 packages/theme-default/src/alert.css        |  7 ++---
 packages/theme-default/src/notification.css |  2 +-
 6 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/examples/docs/notification.md b/examples/docs/notification.md
index 665d9de2e..20b5ad3aa 100644
--- a/examples/docs/notification.md
+++ b/examples/docs/notification.md
@@ -74,12 +74,12 @@
 ## 基本用法
 
 <div class="demo-box demo-notification">
-  <el-button :plain="true" v-on:click="open">点击展示 Notification</el-button>
+  <el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
 </div>
 
 ```html
 <template>
-  <el-button :plain="true" v-on:click="open">点击展示 Notification</el-button>
+  <el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
 </template>
 
 <script>
@@ -99,18 +99,18 @@
 ## 带有 icon
 
 <div class="demo-box demo-notification">
-  <el-button :plain="true" v-on:click="open2">成功</el-button>
-  <el-button :plain="true" v-on:click="open3">警告</el-button>
-  <el-button :plain="true" v-on:click="open4">消息</el-button>
-  <el-button :plain="true" v-on:click="open5">错误</el-button>
+  <el-button :plain="true" v-on:click.native="open2">成功</el-button>
+  <el-button :plain="true" v-on:click.native="open3">警告</el-button>
+  <el-button :plain="true" v-on:click.native="open4">消息</el-button>
+  <el-button :plain="true" v-on:click.native="open5">错误</el-button>
 </div>
 
 ```html
 <template>
-  <el-button :plain="true" v-on:click="open2">成功</el-button>
-  <el-button :plain="true" v-on:click="open3">警告</el-button>
-  <el-button :plain="true" v-on:click="open4">消息</el-button>
-  <el-button :plain="true" v-on:click="open5">错误</el-button>
+  <el-button :plain="true" v-on:click.native="open2">成功</el-button>
+  <el-button :plain="true" v-on:click.native="open3">警告</el-button>
+  <el-button :plain="true" v-on:click.native="open4">消息</el-button>
+  <el-button :plain="true" v-on:click.native="open5">错误</el-button>
 </template>
 
 <script>
@@ -154,12 +154,12 @@
 
 ## 不会自动关闭
 <div class="demo-box demo-notification">
-  <el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button>
+  <el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
 </div>
 
 ```html
 <template>
-  <el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button>
+  <el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
 </template>
 
 <script>
@@ -179,12 +179,12 @@
 
 ## 回调函数
 <div class="demo-box demo-notification">
-  <el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button>
+  <el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
 </div>
 
 ```html
 <template>
-  <el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button>
+  <el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
 </template>
 
 <script>
diff --git a/packages/alert/src/main.vue b/packages/alert/src/main.vue
index 8f3db0aa2..e8c27a76b 100644
--- a/packages/alert/src/main.vue
+++ b/packages/alert/src/main.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="el-alert el-alert--{{ type }}" transition="el-alert-fade" v-show="visible">
-    <i class="el-alert__icon {{ iconClass }} {{ isBigIcon }}" v-if="showIcon"></i>
-    <div class="el-alert__content">
-      <span class="el-alert__title {{ isBoldTitle }}" v-if="title">{{ title }}</span>
-      <p class="el-alert__description" v-if="description">{{ description }}</p>
-      <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
+  <transition name="el-alert-fade">
+    <div class="el-alert" :class="[ typeClass ]" v-show="visible">
+      <i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
+      <div class="el-alert__content">
+        <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title">{{ title }}</span>
+        <p class="el-alert__description" v-if="description">{{ description }}</p>
+        <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
+      </div>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script type="text/babel">
@@ -60,6 +62,10 @@
     },
 
     computed: {
+      typeClass() {
+        return `el-alert--${ this.type }`;
+      },
+
       iconClass() {
         return TYPE_CLASSES_MAP[this.type] || 'el-icon-information';
       },
diff --git a/packages/notification/src/main.js b/packages/notification/src/main.js
index cb220082c..a20a1b2e6 100644
--- a/packages/notification/src/main.js
+++ b/packages/notification/src/main.js
@@ -19,7 +19,8 @@ var Notification = function(options) {
   });
   instance.id = id;
   instance.vm = instance.$mount();
-  instance.vm.$appendTo('body');
+  document.body.appendChild(instance.vm.$el);
+  instance.vm.visible = true;
   instance.dom = instance.vm.$el;
 
   var topDist = 0;
@@ -46,7 +47,7 @@ Notification.close = function(id, userOnClose) {
 
   if (len > 1) {
     for (i = index; i < len - 1 ; i++) {
-      instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 10 + 'px';
+      instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 16 + 'px';
     }
   }
 };
diff --git a/packages/notification/src/main.vue b/packages/notification/src/main.vue
index 3c31e3eb1..767a51608 100644
--- a/packages/notification/src/main.vue
+++ b/packages/notification/src/main.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="el-notification" transition="el-notification-fade" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
-    <i class="el-notification__icon el-icon-{{typeClass}}" v-if="type"></i>
-    <div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
-      <span>{{ title }}</span>
-      <p>{{ message }}</p>
-      <div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
+  <transition name="el-notification-fade">
+    <div class="el-notification" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
+      <i class="el-notification__icon" :class="[ typeClass ]" v-if="type"></i>
+      <div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
+        <span>{{ title }}</span>
+        <p>{{ message }}</p>
+        <div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
+      </div>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script type="text/babel">
@@ -18,10 +20,9 @@
   };
 
   export default {
-    name: 'ElNotification',
-
     data() {
       return {
+        visible: false,
         title: '',
         message: '',
         duration: 4500,
@@ -36,14 +37,18 @@
 
     computed: {
       typeClass() {
-        return this.type ? typeMap[this.type] : '';
+        return this.type ? `el-icon-${ typeMap[this.type] }` : '';
       }
     },
 
     watch: {
       closed(newVal) {
         if (newVal) {
-          this.$destroy(true);
+          this.visible = false;
+          this.$el.addEventListener('transitionend', () => {
+            this.$destroy(true);
+            this.$el.parentNode.removeChild(this.$el);
+          });
         }
       }
     },
@@ -71,7 +76,7 @@
       }
     },
 
-    ready() {
+    mounted() {
       if (this.duration > 0) {
         this.timer = setTimeout(() => {
           if (!this.closed) {
diff --git a/packages/theme-default/src/alert.css b/packages/theme-default/src/alert.css
index bbb99e7c4..89476cf1e 100644
--- a/packages/theme-default/src/alert.css
+++ b/packages/theme-default/src/alert.css
@@ -15,6 +15,7 @@
     color: #fff;
     opacity: 1;
     display: table;
+    transition: opacity .2s;
 
     @modifier success {
       background-color: #13ce66;
@@ -78,12 +79,8 @@
     }
   }
 
-  .el-alert-fade-transition {
-    transition: opacity .2s;
-  }
-
   .el-alert-fade-enter,
-  .el-alert-fade-leave {
+  .el-alert-fade-leave-active {
     opacity: 0;
   }
 }
diff --git a/packages/theme-default/src/notification.css b/packages/theme-default/src/notification.css
index 3a03d56c5..ed73fc555 100644
--- a/packages/theme-default/src/notification.css
+++ b/packages/theme-default/src/notification.css
@@ -72,7 +72,7 @@
     right: 0;
   }
 
-  .el-notification-fade-leave {
+  .el-notification-fade-leave-active {
     opacity: 0;
   }
 }

From 4fcfa04a9b3e7c3687d64801957c0f539edc6d18 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Thu, 11 Aug 2016 11:11:59 +0800
Subject: [PATCH 07/12] relocate variable declaration

---
 packages/notification/src/main.js | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/notification/src/main.js b/packages/notification/src/main.js
index a20a1b2e6..3cbdfdfd6 100644
--- a/packages/notification/src/main.js
+++ b/packages/notification/src/main.js
@@ -1,14 +1,14 @@
 import Vue from 'vue';
-var NotificationConstructor = Vue.extend(require('./main.vue'));
+let NotificationConstructor = Vue.extend(require('./main.vue'));
 
-var instance;
-var instances = [];
-var seed = 1;
+let instance;
+let instances = [];
+let seed = 1;
 
 var Notification = function(options) {
   options = options || {};
-  var userOnClose = options.onClose;
-  var id = 'notification_' + seed++;
+  let userOnClose = options.onClose;
+  let id = 'notification_' + seed++;
 
   options.onClose = function() {
     Notification.close(id, userOnClose);
@@ -23,8 +23,8 @@ var Notification = function(options) {
   instance.vm.visible = true;
   instance.dom = instance.vm.$el;
 
-  var topDist = 0;
-  for (var i = 0, len = instances.length; i < len; i++) {
+  let topDist = 0;
+  for (let i = 0, len = instances.length; i < len; i++) {
     topDist += instances[i].$el.offsetHeight + 16;
   }
   topDist += 16;
@@ -33,13 +33,15 @@ var Notification = function(options) {
 };
 
 Notification.close = function(id, userOnClose) {
+  let index;
+  let removedHeight;
   for (var i = 0, len = instances.length; i < len; i++) {
     if (id === instances[i].id) {
       if (typeof userOnClose === 'function') {
         userOnClose(instances[i]);
       }
-      var index = i;
-      var removedHeight = instances[i].dom.offsetHeight;
+      index = i;
+      removedHeight = instances[i].dom.offsetHeight;
       instances.splice(i, 1);
       break;
     }

From 0d5bcfdd92c9ab0cf96ccaae7784d5780cecd569 Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Thu, 11 Aug 2016 15:13:10 +0800
Subject: [PATCH 08/12] Remove cascader

---
 src/index.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index 0ebd44f91..014a1e21d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ import Group from '../packages/group/index.js';
 import SelectDropdown from '../packages/select-dropdown/index.js';
 import Pagination from '../packages/pagination/index.js';
 import Dialog from '../packages/dialog/index.js';
-import Cascader from '../packages/cascader/index.js';
 import Autocomplete from '../packages/autocomplete/index.js';
 import Dropdown from '../packages/dropdown/index.js';
 import DropdownItem from '../packages/dropdown-item/index.js';
@@ -57,7 +56,6 @@ const install = function(Vue) {
   Vue.component(SelectDropdown.name, SelectDropdown);
   Vue.component(Pagination.name, Pagination);
   Vue.component(Dialog.name, Dialog);
-  Vue.component(Cascader.name, Cascader);
   Vue.component(Autocomplete.name, Autocomplete);
   Vue.component(Dropdown.name, Dropdown);
   Vue.component(DropdownItem.name, DropdownItem);
@@ -122,7 +120,6 @@ module.exports = {
   SelectDropdown,
   Pagination,
   Dialog,
-  Cascader,
   Autocomplete,
   Dropdown,
   DropdownItem,

From 4d07a694359c1fc54028a1249501b3a168345538 Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Thu, 11 Aug 2016 15:17:14 +0800
Subject: [PATCH 09/12] Remove cascader

---
 components.json | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/components.json b/components.json
index 90a32fd66..3f311394d 100644
--- a/components.json
+++ b/components.json
@@ -11,9 +11,6 @@
   "dialog": [
     "./packages/dialog/index.js"
   ],
-  "cascader": [
-    "./packages/cascader/index.js"
-  ],
   "autocomplete": [
     "./packages/autocomplete/index.js"
   ],

From 3b067e44c3e23f4ad87fe1f8278ed9973fc21833 Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Thu, 11 Aug 2016 15:30:08 +0800
Subject: [PATCH 10/12] Update breadcrumb

---
 packages/breadcrumb/src/breadcrumb-item.vue |  8 +-------
 packages/breadcrumb/src/breadcrumb.vue      | 10 ----------
 2 files changed, 1 insertion(+), 17 deletions(-)

diff --git a/packages/breadcrumb/src/breadcrumb-item.vue b/packages/breadcrumb/src/breadcrumb-item.vue
index dc2fe77c7..d9d76cb6c 100644
--- a/packages/breadcrumb/src/breadcrumb-item.vue
+++ b/packages/breadcrumb/src/breadcrumb-item.vue
@@ -6,18 +6,12 @@
 <script>
   export default {
     name: 'ElBreadcrumbItem',
-
-    props: {
-    },
     data() {
       return {
         separator: ''
       };
     },
-    methods: {
-
-    },
-    ready() {
+    mounted() {
       this.separator = this.$parent.separator;
     }
   };
diff --git a/packages/breadcrumb/src/breadcrumb.vue b/packages/breadcrumb/src/breadcrumb.vue
index bca2f50ff..eb4738d4b 100644
--- a/packages/breadcrumb/src/breadcrumb.vue
+++ b/packages/breadcrumb/src/breadcrumb.vue
@@ -12,16 +12,6 @@
         type: String,
         default: '/'
       }
-    },
-    data() {
-      return {
-
-      };
-    },
-    methods: {
-
-    },
-    ready() {
     }
   };
 </script>

From c641355e4f26a79a9bde4699a0cfce7f5644c9c6 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Thu, 11 Aug 2016 15:51:13 +0800
Subject: [PATCH 11/12] update input-number and slider

---
 examples/docs/input-number.md              | 24 ++++----
 examples/docs/slider.md                    | 37 +++++++-----
 packages/input-number/src/input-number.vue | 42 +++++++++-----
 packages/input/src/input.vue               |  7 ++-
 packages/slider/src/main.vue               | 65 +++++++++++++---------
 packages/theme-default/src/slider.css      |  9 +--
 6 files changed, 111 insertions(+), 73 deletions(-)

diff --git a/examples/docs/input-number.md b/examples/docs/input-number.md
index 75b1a94a1..4955988d1 100644
--- a/examples/docs/input-number.md
+++ b/examples/docs/input-number.md
@@ -21,45 +21,45 @@
 <p>当我们需要标准的数字值时可以用到这个组件，它为你提供了数值输入提供了范围控制和递增递减的步数控制。</p>
 
 <div class="demo-box demo-input-number">
-  <el-input-number :value.sync="num1"></el-input-number>
+  <el-input-number v-model="num1"></el-input-number>
 </div>
 
 ```html
-<el-input-number :value.sync="num1"></el-input-number>
+<el-input-number v-model="num1"></el-input-number>
 ```
 
 ## 禁用状态
 
 <div class="demo-box demo-input-number">
-  <el-input-number :value.sync="num1" :disabled="true"></el-input-number>
+  <el-input-number v-model="num1" :disabled="true"></el-input-number>
 </div>
 
 ```html
-<el-input-number :value.sync="num1" :disabled="true"></el-input-number>
+<el-input-number v-model="num1" :disabled="true"></el-input-number>
 ```
 
 ## 步数
 
 <div class="demo-box demo-input-number">
-  <el-input-number :value.sync="num2" :step="2"></el-input-number>
+  <el-input-number v-model="num2" :step="2"></el-input-number>
 </div>
 
 ```html
-<el-input-number :value.sync="num2" :step="2"></el-input-number>
+<el-input-number v-model="num2" :step="2"></el-input-number>
 ```
 
 ## 尺寸
 
 <div class="demo-box demo-input-number">
-  <el-input-number :value.sync="num1" size="large"></el-input-number>
-  <el-input-number :value.sync="num1"></el-input-number>
-  <el-input-number :value.sync="num1" size="small"></el-input-number>
+  <el-input-number v-model="num1" size="large"></el-input-number>
+  <el-input-number v-model="num1"></el-input-number>
+  <el-input-number v-model="num1" size="small"></el-input-number>
 </div>
 
 ```html
-<el-input-number :value.sync="num1" size="large"></el-input-number>
-<el-input-number :value.sync="num1"></el-input-number>
-<el-input-number :value.sync="num1" size="small"></el-input-number>
+<el-input-number v-model="num1" size="large"></el-input-number>
+<el-input-number v-model="num1"></el-input-number>
+<el-input-number v-model="num1" size="small"></el-input-number>
 ```
 
 ## API
diff --git a/examples/docs/slider.md b/examples/docs/slider.md
index 57e9ee094..aa2375ffd 100644
--- a/examples/docs/slider.md
+++ b/examples/docs/slider.md
@@ -1,5 +1,16 @@
 <script>
   export default {
+    data() {
+      return {
+        value1: 0,
+        value2: 50,
+        value3: null,
+        value4: null,
+        value5: null,
+        value6: null,
+        value7: null
+      };
+    },
     methods: {
       onChange(value) {
         console.log(value);
@@ -10,55 +21,55 @@
 
 ## 基本用法
 
-<el-slider></el-slider>
+<el-slider v-model="value1"></el-slider>
 
 ```html
-<el-slider></el-slider>
+<el-slider v-model="value1"></el-slider>
 ```
 
 ## 定义初始值
 
-<el-slider :value="50"></el-slider>
+<el-slider v-model="value2"></el-slider>
 
 ```html
-<el-slider :value="50"></el-slider>
+<el-slider v-model="value2"></el-slider>
 ```
 
 ## 定义区间
 
-<el-slider :min="20" :max="80"></el-slider>
+<el-slider :min="20" :max="80" v-model="value3"></el-slider>
 
 ```html
-<el-slider :min="20" :max="80"></el-slider>
+<el-slider :min="20" :max="80" v-model="value3"></el-slider>
 ```
 
 ## 定义步长
 
-<el-slider :step="10"></el-slider>
+<el-slider :step="10" v-model="value4"></el-slider>
 
 ```html
-<el-slider :step="10"></el-slider>
+<el-slider :step="10" v-model="value4"></el-slider>
 ```
 
 ## 显示间断点
 
-<el-slider :step="10" show-stops></el-slider>
+<el-slider :step="10" show-stops v-model="value5"></el-slider>
 
 ```html
-<el-slider :step="10" show-stops></el-slider>
+<el-slider :step="10" show-stops v-model="value5"></el-slider>
 ```
 
 ## 带有输入框
 
-<el-slider show-input></el-slider>
+<el-slider show-input v-model="value6"></el-slider>
 
 ```html
-<el-slider show-input></el-slider>
+<el-slider show-input v-model="value6"></el-slider>
 ```
 
 ## 回调函数
 
-<el-slider @change="onChange"></el-slider>
+<el-slider @change="onChange" v-model="value7"></el-slider>
 
 ```html
 <template>
diff --git a/packages/input-number/src/input-number.vue b/packages/input-number/src/input-number.vue
index e60de7468..bf49cda62 100644
--- a/packages/input-number/src/input-number.vue
+++ b/packages/input-number/src/input-number.vue
@@ -6,8 +6,8 @@
     ]"
   >
     <el-input
-      :value="value"
-      @onchange="handleChnage"
+      v-model="currentValue"
+      @onchange="handleChange"
       :disabled="disabled"
       :size="size"
       :number="true"
@@ -18,17 +18,17 @@
     <span
       class="el-input-number__decrease el-icon-minus"
       :class="{'is-disabled': minDisabled}"
-      v-repeat-click="decrease()"
+      v-repeat-click="decrease"
       @mouseenter="activeInput(minDisabled)"
-      @mouseleave="unactiveInput(minDisabled)"
+      @mouseleave="inactiveInput(minDisabled)"
     >
     </span>
     <span
       class="el-input-number__increase el-icon-plus"
       :class="{'is-disabled': maxDisabled}"
-      v-repeat-click="increase()"
+      v-repeat-click="increase"
       @mouseenter="activeInput(maxDisabled)"
-      @mouseleave="unactiveInput(maxDisabled)"
+      @mouseleave="inactiveInput(maxDisabled)"
     >
     </span>
   </div>
@@ -41,8 +41,7 @@
     name: 'ElInputNumber',
     props: {
       value: {
-        type: Number,
-        required: true
+        type: Number
       },
       step: {
         type: Number,
@@ -61,13 +60,12 @@
     },
     directives: {
       repeatClick: {
-        bind() {
-          const el = this.el;
+        bind(el, binding, vnode) {
           let interval = null;
           let startTime;
 
           const handler = () => {
-            this.vm.$get(this.expression);
+            vnode.context[binding.expression]();
           };
 
           const clear = function() {
@@ -93,9 +91,23 @@
     },
     data() {
       return {
+        currentValue: null,
         inputActive: false
       };
     },
+    watch: {
+      value: {
+        immediate: true,
+        handler(val) {
+          this.currentValue = val;
+        }
+      },
+      currentValue(val) {
+        if (!isNaN(parseInt(val, 10))) {
+          this.$emit('input', parseInt(val, 10));
+        }
+      }
+    },
     computed: {
       minDisabled() {
         return this.value - this.step < this.min;
@@ -107,14 +119,14 @@
     methods: {
       increase() {
         if (this.value + this.step > this.max || this.disabled) return;
-        this.value += this.step;
+        this.currentValue += this.step;
         if (this.maxDisabled) {
           this.inputActive = false;
         }
       },
       decrease() {
         if (this.value - this.step < this.min || this.disabled) return;
-        this.value -= this.step;
+        this.currentValue -= this.step;
         if (this.minDisabled) {
           this.inputActive = false;
         }
@@ -124,12 +136,12 @@
           this.inputActive = true;
         }
       },
-      unactiveInput(disabled) {
+      inactiveInput(disabled) {
         if (!this.disabled && !disabled) {
           this.inputActive = false;
         }
       },
-      handleChnage(value) {
+      handleChange(value) {
         this.$emit('onchange', value);
       }
     }
diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue
index 884423594..a8fc39e85 100644
--- a/packages/input/src/input.vue
+++ b/packages/input/src/input.vue
@@ -106,8 +106,11 @@
     },
 
     watch: {
-      'value'(val) {
-        this.currentValue = val;
+      'value': {
+        immediate: true,
+        handler(val) {
+          this.currentValue = val;
+        }
       },
 
       'currentValue'(val) {
diff --git a/packages/slider/src/main.vue b/packages/slider/src/main.vue
index 2fbc8c556..e96ffcb1e 100644
--- a/packages/slider/src/main.vue
+++ b/packages/slider/src/main.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="el-slider">
     <el-input-number
-      :value.sync="value"
+      v-model="inputValue"
       v-if="showInput"
       class="el-slider__input"
-      @keyup="onInputChange()"
-      v-el:input
+      @keyup.native="onInputChange()"
+      ref="input"
       :step="step"
       :min="min"
       :max="max"
@@ -13,12 +13,14 @@
     </el-input-number>
     <div class="el-slider__runway"
       :class="{ 'show-input': showInput }"
-      @click="onSliderClick($event)" v-el:slider>
+      @click="onSliderClick" ref="slider">
       <div class="el-slider__bar" :style="{ width: currentPosition }"></div>
-      <div class="el-slider__button-wrapper" @mouseenter="hovering = true" @mouseleave="hovering = false" :style="{left: currentPosition}" v-el:button>
+      <div class="el-slider__button-wrapper" @mouseenter="hovering = true" @mouseleave="hovering = false" :style="{left: currentPosition}" ref="button">
         <div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
       </div>
-      <div class="el-slider__pop" v-show="showTip" transition="popper-fade" v-el:pop>{{ value }}</div>
+      <transition name="popper-fade">
+        <div class="el-slider__pop" v-show="showTip" transition="popper-fade" ref="pop">{{ value }}</div>
+      </transition>
       <div class="el-slider__stop" v-for="item in stops" :style="{ 'left': item + '%' }" v-if="showStops"></div>
     </div>
   </div>
@@ -69,6 +71,8 @@
 
     data() {
       return {
+        inputValue: null,
+        timeout: null,
         showTip: false,
         hovering: false,
         dragging: false,
@@ -80,18 +84,22 @@
     },
 
     watch: {
+      inputValue(val) {
+        this.$emit('input', val);
+      },
+
       showTip(val) {
         if (val) {
           this.$nextTick(() => {
             this.updatePopper();
           });
         } else {
-          setTimeout(() => {
+          this.timeout = setTimeout(() => {
             if (this.popper) {
               this.popper.destroy();
               this.popper = null;
             }
-          }, 150);
+          }, 300);
         }
       },
 
@@ -100,30 +108,37 @@
           this.updatePopper();
         });
         if (val < this.min) {
-          this.value = this.min;
+          this.$emit('input', this.min);
           return;
         }
         if (val > this.max) {
-          this.value = this.max;
+          this.$emit('input', this.max);
           return;
         }
+        this.inputValue = val;
         this.setPosition((val - this.min) * 100 / (this.max - this.min));
       }
     },
 
     methods: {
+      handlePopperStyle() {
+        let placementMap = { top: 'bottom', bottom: 'top' };
+        let placement = this.popper._popper.getAttribute('x-placement').split('-')[0];
+        let origin = placementMap[placement];
+        this.popper._popper.classList.add(placement);
+        this.popper._popper.classList.remove(placementMap[placement]);
+        this.popper._popper.style.transformOrigin = `center ${ origin }`;
+      },
+
       updatePopper() {
         if (this.popper) {
+          clearTimeout(this.timeout);
           this.popper.update();
+          this.handlePopperStyle();
         } else {
-          this.popper = new Popper(this.$els.button, this.$els.pop, { gpuAcceleration: false, placement: 'top' });
+          this.popper = new Popper(this.$refs.button, this.$refs.pop, { gpuAcceleration: false, placement: 'top' });
           this.popper.onCreate(() => {
-            let placementMap = { top: 'bottom', bottom: 'top' };
-            let placement = this.popper._popper.getAttribute('x-placement').split('-')[0];
-            let origin = placementMap[placement];
-            this.popper._popper.classList.add(placement);
-            this.popper._popper.classList.remove(placementMap[placement]);
-            this.popper._popper.style.transformOrigin = `center ${ origin }`;
+            this.handlePopperStyle();
           });
           this.updatePopper();
         }
@@ -133,7 +148,7 @@
         if (newPos >= 0 && (newPos <= 100)) {
           var lengthPerStep = 100 / ((this.max - this.min) / this.step);
           var steps = Math.round(newPos / lengthPerStep);
-          this.value = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min);
+          this.$emit('input', Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min));
           this.currentPosition = (this.value - this.min) / (this.max - this.min) * 100 + '%';
           if (!this.dragging) {
             if (this.value !== this.oldValue) {
@@ -146,8 +161,7 @@
 
       onSliderClick(event) {
         var currentX = event.clientX;
-        var sliderOffsetLeft;
-        getStyle(this.$el.parentNode, 'position') === 'static' ? sliderOffsetLeft = this.$els.slider.offsetLeft : sliderOffsetLeft = this.$el.parentNode.offsetLeft + this.$els.slider.offsetLeft;
+        var sliderOffsetLeft = getStyle(this.$el.parentNode, 'position') === 'static' ? this.$refs.slider.offsetLeft : this.$el.parentNode.offsetLeft + this.$refs.slider.offsetLeft;
         var newPos = (currentX - sliderOffsetLeft) / this.$sliderWidth * 100;
         this.setPosition(newPos);
       },
@@ -164,7 +178,7 @@
 
     computed: {
       $sliderWidth() {
-        return parseInt(getStyle(this.$els.slider, 'width'), 10);
+        return parseInt(getStyle(this.$refs.slider, 'width'), 10);
       },
 
       showTip() {
@@ -183,7 +197,7 @@
       }
     },
 
-    compiled() {
+    mounted() {
       var startX = 0;
       var currentX = 0;
       var startPos = 0;
@@ -212,7 +226,7 @@
         }
       };
 
-      this.$els.button.addEventListener('mousedown', function(event) {
+      this.$refs.button.addEventListener('mousedown', function(event) {
         onDragStart(event);
         window.addEventListener('mousemove', onDragging);
         window.addEventListener('mouseup', onDragEnd);
@@ -220,9 +234,10 @@
     },
 
     created() {
-      if (this.value < this.min || this.value > this.max) {
-        this.value = this.min;
+      if (typeof this.value !== 'number' || this.value < this.min || this.value > this.max) {
+        this.$emit('input', this.min);
       }
+      this.inputValue = this.inputValue || this.value;
     },
 
     beforeDestroy() {
diff --git a/packages/theme-default/src/slider.css b/packages/theme-default/src/slider.css
index 0e2531f59..b29dee91f 100644
--- a/packages/theme-default/src/slider.css
+++ b/packages/theme-default/src/slider.css
@@ -74,6 +74,8 @@
       color: #fff;
       cursor: default;
       z-index: var(--index-top);
+      transition: transform .3s, opacity .3s;
+      transform-origin: center bottom;
 
       &::before {
         triangle: 9px top #20A0FF;
@@ -106,13 +108,8 @@
       transform: translateX(-50%);
     }
 
-    .popper-fade-transition {
-      transition: transform .3s, opacity .3s;
-      transform-origin: center bottom;
-    }
-
     .popper-fade-enter,
-    .popper-fade-leave {
+    .popper-fade-leave-active {
       transform: scale(0.1);
       opacity: 0;
     }

From 1e7809106b1f357b3b43258d45951fa7c17c2d62 Mon Sep 17 00:00:00 2001
From: baiyaaaaa <bigpet1991@gmail.com>
Date: Fri, 5 Aug 2016 16:07:54 +0800
Subject: [PATCH 12/12] fix autocomplete

---
 examples/docs/autocomplete.md                 | 311 +++++++-----------
 package.json                                  |   4 +-
 packages/autocomplete/package.json            |   1 +
 packages/autocomplete/src/autocomplete.vue    | 119 ++++---
 .../theme-default/src/common/transition.css   |  35 +-
 5 files changed, 203 insertions(+), 267 deletions(-)

diff --git a/examples/docs/autocomplete.md b/examples/docs/autocomplete.md
index c0ca13132..026990a6b 100644
--- a/examples/docs/autocomplete.md
+++ b/examples/docs/autocomplete.md
@@ -3,9 +3,7 @@
     .el-autocomplete {
       width: 180px;
     }
-    .el-autocomplete__suggestions.my-autocomplete-suggestions {
-      width: 300px;
-
+    .my-suggestions-item {
       & .remark {
         float: right;
         font-size: 13px;
@@ -14,8 +12,28 @@
   }
 </style>
 <script>
-  var $q = require('q');
-
+  var Vue = require('vue');
+  Vue.component('my-item', {
+    functional: true,
+    render: function (h, ctx) {
+      var item = ctx.props.item;
+      return h('li', {
+        attrs: { class: 'my-suggestions-item' }
+      }, [
+        h('span', { attrs: { class: 'label' } }, ['选项' + ctx.props.index]),
+        h('span', { attrs: { class: 'remark' } }, [item.display])
+      ]);
+    },
+    props: {
+      item: {
+        type: Object,
+        required: true
+      },
+      index: {
+        type: Number
+      }
+    }
+  });
   export default {
     data() {
       return {
@@ -24,10 +42,7 @@
         state2: '',
         state3: '',
         state4: '',
-        myPartial: {
-          name: 'my-autocomplete-suggestions',
-          template: '<span class="label">选项{{$index}}</span><span class="remark">{{item.display}}</span>'
-        }
+        timeout: null
       }
     },
     methods: {
@@ -52,32 +67,28 @@
 
         return result;
       },
-      querySearch(query, simulateQuery) {
+      querySearch(queryString, cb) {
         var states = this.states;
-        var results = query ? states.filter(this.createStateFilter(query)) : states,
-            deferred;
+        var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
         
-        if (simulateQuery) {
-          if (!query) { return []; }
-
-          deferred = $q.defer();
-
-          setTimeout(() => {
-            deferred.resolve(results);
-          }, Math.random() * 3000, false);
-
-          return deferred.promise;
-        } else {
-          return results;
-        }
+        cb(results);
       },
-      createStateFilter(query) {
+      querySearchAsync(queryString, cb) {
+        var states = this.states;
+        var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
+
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+          cb(results);
+        }, 3000 * Math.random());
+      },
+      createStateFilter(queryString) {
         return (state) => {
-          return (state.value.indexOf(query.toLowerCase()) === 0);
+          return (state.value.indexOf(queryString.toLowerCase()) === 0);
         };
       }
     },
-    ready() {
+    mounted() {
       this.states = this.loadAll();
     }
   };
@@ -87,24 +98,25 @@
 
 <div class="demo-box">
   <el-autocomplete
-    :value.sync = "state1"
-    :suggestions = "querySearch(state1)"
-    placeholder = "请输入内容"
+    v-model="state1"
+    :fetch-suggestions="querySearch"
+    placeholder="请输入内容"
   ></el-autocomplete>
 </div>
 
 ```html
 <template>
   <el-autocomplete
-    :value.sync = "state1"
-    :suggestions = "querySearch(state1)"
-    placeholder = "请输入内容"
+    v-model="state1"
+    :fetch-suggestions="querySearch"
+    placeholder="请输入内容"
   ></el-autocomplete>
 </template>
 <script>
   export default {
     data() {
       return {
+        states: [],
         state1: ''
       }
     },
@@ -130,62 +142,71 @@
 
         return result;
       },
-      querySearch(query, simulateQuery) {
+      querySearch(queryString, callback) {
         var states = this.states;
-        var results = query ? states.filter(this.createStateFilter(query)) : states,
-            deferred;
+        var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
         
-        if (simulateQuery) {
-          if (!query) { return []; }
-
-          deferred = $q.defer();
-
-          setTimeout(() => {
-            deferred.resolve(results);
-          }, Math.random() * 3000, false);
-
-          return deferred.promise;
-        } else {
-          return results;
-        }
+        callback(results);
       },
-      createStateFilter(query) {
+      createStateFilter(queryString) {
         return (state) => {
-          return (state.value.indexOf(query.toLowerCase()) === 0);
+          return (state.value.indexOf(queryString.toLowerCase()) === 0);
         };
       }
     },
-    ready() {
+    mounted() {
       this.states = this.loadAll();
     }
   };
 </script>
 ```
 
-## 通过键盘控制下拉的显示
+## 自定义模板
 
 <div class="demo-box">
   <el-autocomplete
-    :value.sync = "state2"
-    :suggestions = "querySearch(state2)"
-    :show-on-up-down = "true"
-    placeholder = "请输入内容"
+    v-model="state2"
+    :fetch-suggestions="querySearch"
+    custom-item="my-item"
+    placeholder="请输入内容"
   ></el-autocomplete>
 </div>
 
 ```html
-<template>
-  <el-autocomplete
-    :value.sync = "state2"
-    :suggestions = "querySearch(state2)"
-    :show-on-up-down = "true"
-    placeholder = "请输入内容"
-  ></el-autocomplete>
-</template>
+<el-autocomplete
+  v-model="state2"
+  :fetch-suggestions="querySearch"
+  custom-item="my-item"
+  placeholder="请输入内容"
+></el-autocomplete>
+
 <script>
+  var Vue = require('vue');
+  Vue.component('my-item', {
+    functional: true,
+    render: function (h, ctx) {
+      var item = ctx.props.item;
+      return h('li', {
+        attrs: { class: 'my-suggestions-item' }
+      }, [
+        h('span', { attrs: { class: 'label' } }, ['选项' + ctx.props.index]),
+        h('span', { attrs: { class: 'remark' } }, [item.display])
+      ]);
+    },
+    props: {
+      item: {
+        type: Object,
+        required: true
+      },
+      index: {
+        type: Number
+      }
+    }
+  });
   export default {
     data() {
       return {
+        states: [],
         state2: ''
       }
     },
@@ -211,116 +232,19 @@
 
         return result;
       },
-      querySearch(query, simulateQuery) {
+      querySearch(queryString, cb) {
         var states = this.states;
-        var results = query ? states.filter(this.createStateFilter(query)) : states,
-            deferred;
+        var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
         
-        if (simulateQuery) {
-          if (!query) { return []; }
-
-          deferred = $q.defer();
-
-          setTimeout(() => {
-            deferred.resolve(results);
-          }, Math.random() * 3000, false);
-
-          return deferred.promise;
-        } else {
-          return results;
-        }
+        cb(results);
       },
-      createStateFilter(query) {
+      createStateFilter(queryString) {
         return (state) => {
-          return (state.value.indexOf(query.toLowerCase()) === 0);
+          return (state.value.indexOf(queryString.toLowerCase()) === 0);
         };
       }
     },
-    ready() {
-      this.states = this.loadAll();
-    }
-  };
-</script>
-```
-
-## 自定义模板
-
-<div class="demo-box">
-  <el-autocomplete
-    :value.sync = "state3"
-    :suggestions = "querySearch(state3)"
-    :partial = "myPartial"
-    placeholder = "请输入内容"
-  ></el-autocomplete>
-</div>
-
-```html
-<el-autocomplete
-  :value.sync = "state3"
-  :suggestions = "querySearch(state3)"
-  :partial = "myPartial"
-  placeholder = "请输入内容"
-></el-autocomplete>
-
-<script>
-  export default {
-    data() {
-      return {
-        state3: '',
-        myPartial: {
-          name: 'my-autocomplete-suggestions',
-          template: '<span class="label">选项{{$index}}</span><span class="remark">{{item.display}}</span>'
-        }
-      }
-    },
-    methods: {
-      loadAll() {
-        var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
-                Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
-                Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
-                Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
-                North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
-                South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
-                Wisconsin, Wyoming';
-        var result = [];
-
-        allStates.split(/, +/g).forEach((state) => {
-          if (state) {
-            result.push({
-              value: state.toLowerCase(),
-              display: state
-            });
-          }
-        });
-
-        return result;
-      },
-      querySearch(query, simulateQuery) {
-        var states = this.states;
-        var results = query ? states.filter(this.createStateFilter(query)) : states,
-            deferred;
-        
-        if (simulateQuery) {
-          if (!query) { return []; }
-
-          deferred = $q.defer();
-
-          setTimeout(() => {
-            deferred.resolve(results);
-          }, Math.random() * 3000, false);
-
-          return deferred.promise;
-        } else {
-          return results;
-        }
-      },
-      createStateFilter(query) {
-        return (state) => {
-          return (state.value.indexOf(query.toLowerCase()) === 0);
-        };
-      }
-    },
-    ready() {
+    mounted() {
       this.states = this.loadAll();
     }
   };
@@ -331,27 +255,26 @@
 
 <div class="demo-box">
   <el-autocomplete
-    :value.sync = "state4"
-    :suggestions = "querySearch(state4, true)"
-    :search-from-server = "true"
+    v-model="state3"
     placeholder = "请输入内容"
+    :fetch-Suggestions="querySearchAsync"
   ></el-autocomplete>
 </div>
 
 ```html
-<el-autocomplete
-  :value.sync = "state4"
-  :suggestions = "querySearch(state4, true)"
-  :search-from-server = "true"
-  placeholder = "请输入内容"
-></el-autocomplete>
+<template>
+  <el-autocomplete
+    v-model="state3"
+    placeholder = "请输入内容"
+    :fetch-Suggestions="querySearchAsync"
+  ></el-autocomplete>
+</template>
 <script>
-  var $q = require('q');
-
   export default {
     data() {
       return {
-        state4: ''
+        state3: '',
+        states: []
       }
     },
     methods: {
@@ -376,24 +299,15 @@
 
         return result;
       },
-      querySearch(query, simulateQuery) {
+      querySearchAsync(query, callback) {
         var states = this.states;
-        var results = query ? states.filter(this.createStateFilter(query)) : states,
-            deferred;
-        
-        if (simulateQuery) {
-          if (!query) { return []; }
+        var results = query ? states.filter(this.createStateFilter(query)) : states;
 
-          deferred = $q.defer();
+        if (!query) { return []; }
 
-          setTimeout(() => {
-            deferred.resolve(results);
-          }, Math.random() * 3000, false);
-
-          return deferred.promise;
-        } else {
-          return results;
-        }
+        setTimeout(() => {
+          callback(results);
+        }, 3000 * Math.random());        
       },
       createStateFilter(query) {
         return (state) => {
@@ -413,7 +327,6 @@
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | placeholder   | 输入框占位文本   | string          |                       |         |
 | disabled      | 禁用            | boolean         | true, false           | false   |
-| suggestions   | 建议列表 | array,object  |  |  |
-| value         | 输入绑定值   | string  |                     |         |
+| value         | 必填值输入绑定值   | string  |                     |         |
 | showOnUpDown  | 是否通过键盘上下键控制建议列表 | boolean  |    |         |
-| partial       | 建议列表的自定义模板           | object  |                       |         |
+| fetch-suggestions | 返回输入建议的方法，组件内部通过调用该方法来获得输入建议的数据，在该方法中，仅当你的输入建议数据 resolve 时再通过调用 callback(data:[]) 来返回它  | Function(queryString, callback)  |        |         |
diff --git a/package.json b/package.json
index 0b013af42..034f16084 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   "devDependencies": {
     "babel-helper-vue-jsx-merge-props": "^1.0.1",
     "babel-plugin-syntax-jsx": "^6.8.0",
-    "babel-plugin-transform-vue-jsx": "^1.1.1",
+    "babel-plugin-transform-vue-jsx": "^3.1.0",
     "file-save": "^0.2.0",
     "gh-pages": "^0.11.0",
     "highlight.js": "^9.3.0",
@@ -44,7 +44,7 @@
     "purecss": "^0.6.0",
     "q": "^1.4.1",
     "uppercamelcase": "^1.1.0",
-    "vue": "^2.0.0-beta.5",
+    "vue": "^2.0.0-beta.8",
     "vue-loader": "^9.2.3",
     "vue-markdown-loader": "^0.4.0",
     "vue-popup": "^0.2.1",
diff --git a/packages/autocomplete/package.json b/packages/autocomplete/package.json
index 46542b179..e1af11c42 100644
--- a/packages/autocomplete/package.json
+++ b/packages/autocomplete/package.json
@@ -12,5 +12,6 @@
   "author": "haiping.zeng<haiping.zeng@ele.me>",
   "license": "MIT",
   "dependencies": {
+    "vue-clickoutside": "^0.1.0"
   }
 }
diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue
index 7c5374cff..f1072135f 100644
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@@ -1,36 +1,54 @@
 <template>
-  <div class="el-autocomplete">
+  <div class="el-autocomplete" v-clickoutside="handleBlur">
     <el-input
       :value="value"
       :disabled="disabled"
       :placeholder="placeholder"
-      :name = 'name'
+      :name='name'
       @onchange="handleChange"
-      @onfocus="handleFocus()"
-      @onblur="handleBlur()"
-      @keydown.up="highlight(highlightedIndex - 1)"
-      @keydown.down="highlight(highlightedIndex + 1)"
-      @keydown.enter="select(highlightedIndex)"
+      @onfocus="handleFocus"
+      @keydown.up.native="highlight(highlightedIndex - 1)"
+      @keydown.down.native="highlight(highlightedIndex + 1)"
+      @keydown.enter.native="select(highlightedIndex)"
     ></el-input>
-    <ul
-      v-show="showSuggestions && !loading && suggestions.length > 0"
-      class="el-autocomplete__suggestions"
-      :class="[partial ? partial.name : '']"
-      transition="md-fade-bottom"
-      v-el:suggestions
-    >
-      <li :class="{'highlighted': highlightedIndex === $index}" @click="select($index)" v-for="item in suggestions">{{item.display}}</li>
-    </ul>
-    <div
-      v-show="showSuggestions && loading"
-      class="el-autocomplete__suggestions is-loading"
-    >
-      <i class="el-icon-loading"></i>
-    </div>
+    <transition name="md-fade-bottom">
+      <ul
+        v-show="suggestionVisible && !loading && suggestions.length > 0"
+        class="el-autocomplete__suggestions"
+        ref="suggestions"
+      >
+        <li
+          v-if="!customItem"
+          :class="{'highlighted': highlightedIndex === index}"
+          @click="select(index)"
+          v-for="(item, index) in suggestions">
+          {{item.display}}
+        </li>
+        <component
+          v-else
+          :is="customItem"
+          @click.native="select(index)"
+          v-for="(item, index) in suggestions"
+          :item="item"
+          :index="index">
+        </component>
+      </ul>
+    </transition>
+    <transition name="md-fade-bottom">
+      <div
+        v-show="suggestionVisible && loading"
+        class="el-autocomplete__suggestions is-loading"
+      >
+        <i class="el-icon-loading"></i>
+      </div>
+    </transition>
   </div>
 </template>
 <script>
   import ElInput from 'packages/input/index.js';
+  import Vue from 'vue';
+  import VueClickoutside from 'main/utils/clickoutside';
+  Vue.use(VueClickoutside);
 
   export default {
     name: 'ElAutocomplete',
@@ -42,61 +60,58 @@
       placeholder: String,
       disabled: Boolean,
       name: String,
-      suggestions: [Array, Object],
       value: String,
-      showOnUpDown: Boolean,
-      partial: Object
+      fetchSuggestions: Function,
+      triggerOnfocus: {
+        type: Boolean,
+        default: true
+      },
+      customItem: String
     },
     data() {
       return {
-        showSuggestions: false,
+        suggestions: [],
+        suggestionVisible: false,
         inputFocusing: false,
         loading: false,
         highlightedIndex: -1
       };
     },
-    created() {
-      if (this.partial) {
-        this.$options.template = this.$options.template.replace(/(item\sin\ssuggestions">)(?:.|\s)*?(<)/, '$1' + this.partial.template + '$2');
-      }
-    },
-    watch: {
-      'suggestions'(val) {
-        if (val && val.then) {
-          this.loading = true;
-          this.suggestions.then((res) => {
-            this.loading = false;
-            this.suggestions = res;
-          });
-        }
-      }
-    },
     methods: {
       handleChange(value) {
-        this.value = value;
-        this.showSuggestions = true;
+        this.$emit('input', value);
+        this.showSuggestions(value);
       },
       handleFocus() {
-        if (!this.showOnUpDown) {
-          this.showSuggestions = true;
+        if (this.triggerOnfocus) {
+          this.showSuggestions(this.value);
         }
       },
       handleBlur() {
-        this.showSuggestions = false;
+        this.suggestionVisible = false;
       },
       select(index) {
+        debugger;
         if (this.suggestions && this.suggestions[index]) {
-          this.value = this.suggestions[index].value;
+          this.$emit('input', this.suggestions[index].value);
           this.$nextTick(() => {
-            this.showSuggestions = false;
+            this.suggestionVisible = false;
           });
         }
       },
+      showSuggestions(value) {
+        this.suggestionVisible = true;
+        this.loading = true;
+        this.fetchSuggestions(value, (suggestions) => {
+          this.loading = false;
+          this.suggestions = suggestions;
+        });
+      },
       getSuggestionElement(index) {
         if (!this.suggestions || !this.suggestions[index]) {
           return null;
         } else {
-          return this.$els.suggestions.children[index];
+          return this.$refs.suggestions.children[index];
         }
       },
       highlight(index) {
@@ -107,7 +122,7 @@
         }
 
         var elSelect = this.getSuggestionElement(index);
-        var elSuggestions = this.$els.suggestions;
+        var elSuggestions = this.$refs.suggestions;
         var scrollTop = elSuggestions.scrollTop;
         var offsetTop = elSelect.offsetTop;
 
@@ -121,7 +136,7 @@
         this.highlightedIndex = index;
 
         if (this.showOnUpDown) {
-          this.showSuggestions = true;
+          this.suggestionVisible = true;
         }
       }
     }
diff --git a/packages/theme-default/src/common/transition.css b/packages/theme-default/src/common/transition.css
index 4c4f65eca..402b4c10c 100644
--- a/packages/theme-default/src/common/transition.css
+++ b/packages/theme-default/src/common/transition.css
@@ -28,28 +28,28 @@
   transition: all .3s cubic-bezier(.55,0,.1,1);
 }
 .md-fade-center-enter,
-.md-fade-center-leave {
-  opacity: 0;
-  transform: scaleY(0);
-}
+.md-fade-center-leave,
 .md-fade-center-leave-active {
   opacity: 0;
   transform: scaleY(0);
 }
 
-.md-fade-bottom-transition {
+.md-fade-bottom-enter-active,
+.md-fade-bottom-leave-active {
   opacity: 1;
   transform: scaleY(1);
   transition: var(--md-fade-transition);
   transform-origin: center top;
 }
 .md-fade-bottom-enter,
-.md-fade-bottom-leave {
+.md-fade-bottom-leave,
+.md-fade-bottom-leave-active {
   opacity: 0;
   transform: scaleY(0);
 }
 
-.md-fade-top-transition {
+.md-fade-top-enter-active,
+.md-fade-top-leave-active {
   opacity: 1;
   transform: scaleY(1);
   transition: var(--md-fade-transition);
@@ -57,40 +57,47 @@
 }
 
 .md-fade-top-enter,
-.md-fade-top-leave {
+.md-fade-top-leave,
+.md-fade-top-leave-active {
   opacity: 0;
   transform: scaleY(0);
 }
 
-.md-fade-left-transition {
+.md-fade-left-enter-active,
+.md-fade-left-leave-active {
   opacity: 1;
   transform: scaleX(1);
   transition: var(--md-fade-transition);
   transform-origin: right center;
 }
 .md-fade-left-enter,
-.md-fade-left-leave {
+.md-fade-left-leave,
+.md-fade-left-leave-active {
   opacity: 0;
   transform: scaleX(0);
 }
 
-.md-fade-right-transition {
+.md-fade-right-enter-active,
+.md-fade-right-leave-active {
   opacity: 1;
   transform: scaleX(1);
   transition: var(--md-fade-transition);
   transform-origin: left center;
 }
 .md-fade-right-enter,
-.md-fade-right-leave {
+.md-fade-right-leave,
+.md-fade-right-leave-active {
   opacity: 0;
   transform: scaleX(0);
 }
 
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition: opacity .3s cubic-bezier(.645,.045,.355,1);
 }
 .fade-enter,
-.fade-leave {
+.fade-leave,
+.fade-leave-active {
   opacity: 0;
 }