diff --git a/build/dev.js b/build/dev.js
index b9ea163b..08323b4f 100644
--- a/build/dev.js
+++ b/build/dev.js
@@ -1,5 +1,9 @@
 require('./compiler');
+const fs = require('fs-extra');
+const path = require('path');
 const serve = require('webpack-serve');
 const config = require('./webpack.doc.dev');
 
+fs.removeSync(path.join(__dirname, '../example/dist'));
+
 serve({}, { config });
diff --git a/dist/common/create.js b/dist/common/create.js
index 5643018e..a6174a82 100644
--- a/dist/common/create.js
+++ b/dist/common/create.js
@@ -1,6 +1,4 @@
-function $emit() {
-  this.triggerEvent.apply(this, arguments);
-}
+import { basic } from '../mixins/basic';
 
 export function create(sfc) {
   // map props to properties
@@ -15,25 +13,26 @@ export function create(sfc) {
     delete sfc.mixins;
   }
 
-  // map field to form-field behavior
-  if (sfc.field) {
-    sfc.behaviors = sfc.behaviors || [];
-    sfc.behaviors.push('wx://form-field');
-  }
+  // map classes to externalClasses
+  sfc.externalClasses = sfc.classes || [];
+  delete sfc.classes;
+
+  // add default externalClasses
+  sfc.externalClasses.push('custom-class');
+
+  // add default behaviors
+  sfc.behaviors = sfc.behaviors || [];
+  sfc.behaviors.push(basic);
 
   // add default options
   sfc.options = sfc.options || {};
   sfc.options.multipleSlots = true;
   sfc.options.addGlobalClass = true;
 
-  // add default externalClasses
-  sfc.externalClasses = sfc.classes || [];
-  sfc.externalClasses.push('custom-class');
-
-  // add default methods
-  sfc.methods = sfc.methods || {};
-  sfc.methods.$emit = $emit;
+  // map field to form-field behavior
+  if (sfc.field) {
+    sfc.behaviors.push('wx://form-field');
+  }
 
   Component(sfc);
 };
-
diff --git a/dist/mixins/basic.js b/dist/mixins/basic.js
new file mode 100644
index 00000000..8f7b21a1
--- /dev/null
+++ b/dist/mixins/basic.js
@@ -0,0 +1,23 @@
+export const basic = Behavior({
+  options: {
+    multipleSlots: true,
+    addGlobalClass: true
+  },
+
+  methods: {
+    $emit() {
+      this.triggerEvent.apply(this, arguments);
+    },
+
+    getRect(selector, all) {
+      return new Promise((resolve, reject) => {
+        wx.createSelectorQuery()
+          .in(this)[all ? 'selectAll' : 'select'](selector)
+          .boundingClientRect(rect => {
+            rect && resolve(rect);
+          })
+          .exec();
+      });
+    }
+  }
+});
diff --git a/dist/notice-bar/index.js b/dist/notice-bar/index.js
index 393ee159..b01addee 100644
--- a/dist/notice-bar/index.js
+++ b/dist/notice-bar/index.js
@@ -76,55 +76,47 @@ create({
 
   methods: {
     init() {
-      wx.createSelectorQuery()
-        .in(this)
-        .select('.van-notice-bar__content')
-        .boundingClientRect((rect) => {
+      this.getRect('.van-notice-bar__content').then(rect => {
+        if (!rect || !rect.width) {
+          return;
+        }
+        this.setData({
+          width: rect.width
+        });
+
+        this.getRect('.van-notice-bar__content-wrap').then(rect => {
           if (!rect || !rect.width) {
             return;
           }
-          this.setData({
-            width: rect.width
-          });
 
-          wx.createSelectorQuery()
-            .in(this)
-            .select('.van-notice-bar__content-wrap')
-            .boundingClientRect((rect) => {
-              if (!rect || !rect.width) {
-                return;
-              }
+          const wrapWidth = rect.width;
+          const {
+            width, speed, scrollable, delay
+          } = this.data;
 
-              const wrapWidth = rect.width;
-              const {
-                width, speed, scrollable, delay
-              } = this.data;
+          if (scrollable && wrapWidth < width) {
+            const elapse = width / speed * 1000;
+            const animation = wx.createAnimation({
+              duration: elapse,
+              timeingFunction: 'linear',
+              delay
+            });
+            const resetAnimation = wx.createAnimation({
+              duration: 0,
+              timeingFunction: 'linear'
+            });
 
-              if (scrollable && wrapWidth < width) {
-                const elapse = width / speed * 1000;
-                const animation = wx.createAnimation({
-                  duration: elapse,
-                  timeingFunction: 'linear',
-                  delay
-                });
-                const resetAnimation = wx.createAnimation({
-                  duration: 0,
-                  timeingFunction: 'linear'
-                });
-
-                this.setData({
-                  elapse,
-                  wrapWidth,
-                  animation,
-                  resetAnimation
-                }, () => {
-                  this.scroll();
-                });
-              }
-            })
-            .exec();
-        })
-        .exec();
+            this.setData({
+              elapse,
+              wrapWidth,
+              animation,
+              resetAnimation
+            }, () => {
+              this.scroll();
+            });
+          }
+        });
+      });
     },
 
     scroll() {
diff --git a/dist/progress/index.js b/dist/progress/index.js
index 72fe3104..0bbb7b84 100644
--- a/dist/progress/index.js
+++ b/dist/progress/index.js
@@ -85,25 +85,15 @@ create({
       });
     },
 
-    getRect(selector, callback) {
-      wx.createSelectorQuery()
-        .in(this)
-        .select(selector)
-        .boundingClientRect(rect => {
-          rect && callback(rect);
-        })
-        .exec();
-    },
-
     getWidth() {
-      this.getRect('.van-progress', rect => {
+      this.getRect('.van-progress').then(rect => {
         this.setData({
           progressWidth: rect.width
         });
         this.setPortionStyle();
       });
 
-      this.getRect('.van-progress__pivot', rect => {
+      this.getRect('.van-progress__pivot').then(rect => {
         this.setData({
           pivotWidth: rect.width || 0
         });
diff --git a/dist/slider/index.js b/dist/slider/index.js
index a83387d6..18bd1ec8 100644
--- a/dist/slider/index.js
+++ b/dist/slider/index.js
@@ -33,14 +33,6 @@ create({
   },
 
   methods: {
-    getRect(callback) {
-      wx.createSelectorQuery()
-        .in(this)
-        .select('.van-slider')
-        .boundingClientRect(callback)
-        .exec();
-    },
-
     onTouchStart(event) {
       if (this.data.disabled) return;
 
@@ -52,7 +44,7 @@ create({
       if (this.data.disabled) return;
 
       this.touchMove(event);
-      this.getRect(rect => {
+      this.getRect('.van-slider').then(rect => {
         const diff = this.deltaX / rect.width * 100;
         this.updateValue(this.startValue + diff);
       });
diff --git a/dist/tabs/index.js b/dist/tabs/index.js
index d1b45b26..7aabbef2 100644
--- a/dist/tabs/index.js
+++ b/dist/tabs/index.js
@@ -100,21 +100,12 @@ create({
       }
     },
 
-    getRect(selector, callback, all) {
-      wx.createSelectorQuery()
-        .in(this)[all ? 'selectAll' : 'select'](selector)
-        .boundingClientRect(rect => {
-          rect && callback(rect);
-        })
-        .exec();
-    },
-
     setLine() {
       if (this.data.type !== 'line') {
         return;
       }
 
-      this.getRect('.van-tab', rects => {
+      this.getRect('.van-tab', true).then(rects => {
         const rect = rects[this.data.active];
         const width = this.data.lineWidth || rect.width;
         let left = rects
@@ -130,7 +121,7 @@ create({
             transition-duration: ${this.data.duration}s;
           `
         });
-      }, true);
+      });
     },
 
     setActiveTab() {
@@ -155,20 +146,20 @@ create({
         return;
       }
 
-      this.getRect('.van-tab', tabRects => {
+      this.getRect('.van-tab', true).then(tabRects => {
         const tabRect = tabRects[this.data.active];
         const offsetLeft = tabRects
           .slice(0, this.data.active)
           .reduce((prev, curr) => prev + curr.width, 0);
         const tabWidth = tabRect.width;
 
-        this.getRect('.van-tabs__nav', navRect => {
+        this.getRect('.van-tabs__nav').then(navRect => {
           const navWidth = navRect.width;
           this.setData({
             scrollLeft: offsetLeft - (navWidth - tabWidth) / 2
           });
         });
-      }, true);
+      });
     }
   }
 });
diff --git a/packages/common/create.js b/packages/common/create.js
index 5643018e..a6174a82 100644
--- a/packages/common/create.js
+++ b/packages/common/create.js
@@ -1,6 +1,4 @@
-function $emit() {
-  this.triggerEvent.apply(this, arguments);
-}
+import { basic } from '../mixins/basic';
 
 export function create(sfc) {
   // map props to properties
@@ -15,25 +13,26 @@ export function create(sfc) {
     delete sfc.mixins;
   }
 
-  // map field to form-field behavior
-  if (sfc.field) {
-    sfc.behaviors = sfc.behaviors || [];
-    sfc.behaviors.push('wx://form-field');
-  }
+  // map classes to externalClasses
+  sfc.externalClasses = sfc.classes || [];
+  delete sfc.classes;
+
+  // add default externalClasses
+  sfc.externalClasses.push('custom-class');
+
+  // add default behaviors
+  sfc.behaviors = sfc.behaviors || [];
+  sfc.behaviors.push(basic);
 
   // add default options
   sfc.options = sfc.options || {};
   sfc.options.multipleSlots = true;
   sfc.options.addGlobalClass = true;
 
-  // add default externalClasses
-  sfc.externalClasses = sfc.classes || [];
-  sfc.externalClasses.push('custom-class');
-
-  // add default methods
-  sfc.methods = sfc.methods || {};
-  sfc.methods.$emit = $emit;
+  // map field to form-field behavior
+  if (sfc.field) {
+    sfc.behaviors.push('wx://form-field');
+  }
 
   Component(sfc);
 };
-
diff --git a/packages/mixins/basic.js b/packages/mixins/basic.js
new file mode 100644
index 00000000..8f7b21a1
--- /dev/null
+++ b/packages/mixins/basic.js
@@ -0,0 +1,23 @@
+export const basic = Behavior({
+  options: {
+    multipleSlots: true,
+    addGlobalClass: true
+  },
+
+  methods: {
+    $emit() {
+      this.triggerEvent.apply(this, arguments);
+    },
+
+    getRect(selector, all) {
+      return new Promise((resolve, reject) => {
+        wx.createSelectorQuery()
+          .in(this)[all ? 'selectAll' : 'select'](selector)
+          .boundingClientRect(rect => {
+            rect && resolve(rect);
+          })
+          .exec();
+      });
+    }
+  }
+});
diff --git a/packages/notice-bar/index.js b/packages/notice-bar/index.js
index 393ee159..b01addee 100644
--- a/packages/notice-bar/index.js
+++ b/packages/notice-bar/index.js
@@ -76,55 +76,47 @@ create({
 
   methods: {
     init() {
-      wx.createSelectorQuery()
-        .in(this)
-        .select('.van-notice-bar__content')
-        .boundingClientRect((rect) => {
+      this.getRect('.van-notice-bar__content').then(rect => {
+        if (!rect || !rect.width) {
+          return;
+        }
+        this.setData({
+          width: rect.width
+        });
+
+        this.getRect('.van-notice-bar__content-wrap').then(rect => {
           if (!rect || !rect.width) {
             return;
           }
-          this.setData({
-            width: rect.width
-          });
 
-          wx.createSelectorQuery()
-            .in(this)
-            .select('.van-notice-bar__content-wrap')
-            .boundingClientRect((rect) => {
-              if (!rect || !rect.width) {
-                return;
-              }
+          const wrapWidth = rect.width;
+          const {
+            width, speed, scrollable, delay
+          } = this.data;
 
-              const wrapWidth = rect.width;
-              const {
-                width, speed, scrollable, delay
-              } = this.data;
+          if (scrollable && wrapWidth < width) {
+            const elapse = width / speed * 1000;
+            const animation = wx.createAnimation({
+              duration: elapse,
+              timeingFunction: 'linear',
+              delay
+            });
+            const resetAnimation = wx.createAnimation({
+              duration: 0,
+              timeingFunction: 'linear'
+            });
 
-              if (scrollable && wrapWidth < width) {
-                const elapse = width / speed * 1000;
-                const animation = wx.createAnimation({
-                  duration: elapse,
-                  timeingFunction: 'linear',
-                  delay
-                });
-                const resetAnimation = wx.createAnimation({
-                  duration: 0,
-                  timeingFunction: 'linear'
-                });
-
-                this.setData({
-                  elapse,
-                  wrapWidth,
-                  animation,
-                  resetAnimation
-                }, () => {
-                  this.scroll();
-                });
-              }
-            })
-            .exec();
-        })
-        .exec();
+            this.setData({
+              elapse,
+              wrapWidth,
+              animation,
+              resetAnimation
+            }, () => {
+              this.scroll();
+            });
+          }
+        });
+      });
     },
 
     scroll() {
diff --git a/packages/progress/index.js b/packages/progress/index.js
index 72fe3104..0bbb7b84 100644
--- a/packages/progress/index.js
+++ b/packages/progress/index.js
@@ -85,25 +85,15 @@ create({
       });
     },
 
-    getRect(selector, callback) {
-      wx.createSelectorQuery()
-        .in(this)
-        .select(selector)
-        .boundingClientRect(rect => {
-          rect && callback(rect);
-        })
-        .exec();
-    },
-
     getWidth() {
-      this.getRect('.van-progress', rect => {
+      this.getRect('.van-progress').then(rect => {
         this.setData({
           progressWidth: rect.width
         });
         this.setPortionStyle();
       });
 
-      this.getRect('.van-progress__pivot', rect => {
+      this.getRect('.van-progress__pivot').then(rect => {
         this.setData({
           pivotWidth: rect.width || 0
         });
diff --git a/packages/slider/index.js b/packages/slider/index.js
index a83387d6..18bd1ec8 100644
--- a/packages/slider/index.js
+++ b/packages/slider/index.js
@@ -33,14 +33,6 @@ create({
   },
 
   methods: {
-    getRect(callback) {
-      wx.createSelectorQuery()
-        .in(this)
-        .select('.van-slider')
-        .boundingClientRect(callback)
-        .exec();
-    },
-
     onTouchStart(event) {
       if (this.data.disabled) return;
 
@@ -52,7 +44,7 @@ create({
       if (this.data.disabled) return;
 
       this.touchMove(event);
-      this.getRect(rect => {
+      this.getRect('.van-slider').then(rect => {
         const diff = this.deltaX / rect.width * 100;
         this.updateValue(this.startValue + diff);
       });
diff --git a/packages/tabs/index.js b/packages/tabs/index.js
index d1b45b26..7aabbef2 100644
--- a/packages/tabs/index.js
+++ b/packages/tabs/index.js
@@ -100,21 +100,12 @@ create({
       }
     },
 
-    getRect(selector, callback, all) {
-      wx.createSelectorQuery()
-        .in(this)[all ? 'selectAll' : 'select'](selector)
-        .boundingClientRect(rect => {
-          rect && callback(rect);
-        })
-        .exec();
-    },
-
     setLine() {
       if (this.data.type !== 'line') {
         return;
       }
 
-      this.getRect('.van-tab', rects => {
+      this.getRect('.van-tab', true).then(rects => {
         const rect = rects[this.data.active];
         const width = this.data.lineWidth || rect.width;
         let left = rects
@@ -130,7 +121,7 @@ create({
             transition-duration: ${this.data.duration}s;
           `
         });
-      }, true);
+      });
     },
 
     setActiveTab() {
@@ -155,20 +146,20 @@ create({
         return;
       }
 
-      this.getRect('.van-tab', tabRects => {
+      this.getRect('.van-tab', true).then(tabRects => {
         const tabRect = tabRects[this.data.active];
         const offsetLeft = tabRects
           .slice(0, this.data.active)
           .reduce((prev, curr) => prev + curr.width, 0);
         const tabWidth = tabRect.width;
 
-        this.getRect('.van-tabs__nav', navRect => {
+        this.getRect('.van-tabs__nav').then(navRect => {
           const navWidth = navRect.width;
           this.setData({
             scrollLeft: offsetLeft - (navWidth - tabWidth) / 2
           });
         });
-      }, true);
+      });
     }
   }
 });