diff --git a/package.json b/package.json
index d198eac58..6d56b11c9 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "vue": "^2.0.1",
     "vue-loader": "^9.5.1",
     "vue-markdown-loader": "^0.5.1",
-    "vue-popup": "^0.2.6",
+    "vue-popup": "^0.2.7",
     "vue-router": "^2.0.0",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.15.1",
diff --git a/packages/loading/package.json b/packages/loading/package.json
index b2db41026..533a1103e 100644
--- a/packages/loading/package.json
+++ b/packages/loading/package.json
@@ -11,5 +11,7 @@
   "repository": "https://github.com/element-component/element/tree/master/packages/loading",
   "author": "elemefe",
   "license": "MIT",
-  "dependencies": {}
+  "dependencies": {
+    "wind-dom": "0.0.3"
+  }
 }
diff --git a/packages/loading/src/spinner.js b/packages/loading/src/spinner.js
index 97e29adf7..342a6e819 100644
--- a/packages/loading/src/spinner.js
+++ b/packages/loading/src/spinner.js
@@ -1,10 +1,12 @@
+import { addClass } from 'wind-dom/src/class';
+
 class Spinner {
   constructor() {
     let spinner = document.createElement('div');
-    spinner.classList.add('el-loading-spinner');
+    addClass(spinner, 'el-loading-spinner');
     [1, 2, 3].forEach(index => {
       let bubble = document.createElement('div');
-      bubble.classList.add('el-loading-bubble', `bubble${ index }`);
+      addClass(bubble, `el-loading-bubble bubble${ index }`);
       spinner.appendChild(bubble);
     });
     this.el = spinner;
diff --git a/packages/message-box/package.json b/packages/message-box/package.json
index 97718de96..b0b3315d6 100644
--- a/packages/message-box/package.json
+++ b/packages/message-box/package.json
@@ -12,5 +12,6 @@
   "author": "elemefe",
   "license": "MIT",
   "dependencies": {
+    "wind-dom": "0.0.3"
   }
 }
diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue
index e9d1548db..1502822a6 100644
--- a/packages/message-box/src/main.vue
+++ b/packages/message-box/src/main.vue
@@ -35,6 +35,7 @@
 
   import Popup from 'vue-popup';
   import ElInput from 'packages/input/index.js';
+  import { addClass, removeClass } from 'wind-dom/src/class';
 
   export default {
     mixins: [ Popup ],
@@ -113,7 +114,7 @@
           var inputPattern = this.inputPattern;
           if (inputPattern && !inputPattern.test(this.inputValue || '')) {
             this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
-            this.$refs.input.$el.querySelector('input').classList.add('invalid');
+            addClass(this.$refs.input.$el.querySelector('input'), 'invalid');
             return false;
           }
           var inputValidator = this.inputValidator;
@@ -121,7 +122,7 @@
             var validateResult = inputValidator(this.inputValue);
             if (validateResult === false) {
               this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
-              this.$refs.input.$el.querySelector('input').classList.add('invalid');
+              addClass(this.$refs.input.$el.querySelector('input'), 'invalid');
               return false;
             }
             if (typeof validateResult === 'string') {
@@ -131,7 +132,7 @@
           }
         }
         this.editorErrorMessage = '';
-        this.$refs.input.$el.querySelector('input').classList.remove('invalid');
+        removeClass(this.$refs.input.$el.querySelector('input'), 'invalid');
         return true;
       }
     },
diff --git a/packages/rate/package.json b/packages/rate/package.json
index 111d54f7d..d1233975a 100644
--- a/packages/rate/package.json
+++ b/packages/rate/package.json
@@ -11,5 +11,7 @@
   "repository": "https://github.com/element-component/element/tree/master/packages/rate",
   "author": "elemefe",
   "license": "MIT",
-  "dependencies": {}
+  "dependencies": {
+    "wind-dom": "0.0.3"
+  }
 }
diff --git a/packages/rate/src/main.vue b/packages/rate/src/main.vue
index 124748116..13c8f4402 100644
--- a/packages/rate/src/main.vue
+++ b/packages/rate/src/main.vue
@@ -24,6 +24,8 @@
 </template>
 
 <script type="text/babel">
+  import { hasClass } from 'wind-dom/src/class';
+
   export default {
     name: 'el-rate',
 
@@ -223,10 +225,10 @@
         }
         if (this.allowHalf) {
           let target = event.target;
-          if (target.classList.contains('el-rate__item')) {
+          if (hasClass(target, 'el-rate__item')) {
             target = target.querySelector('.el-rate__icon');
           }
-          if (target.classList.contains('el-rate__decimal')) {
+          if (hasClass(target, 'el-rate__decimal')) {
             target = target.parentNode;
           }
           this.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
diff --git a/packages/select/package.json b/packages/select/package.json
index 95fd7126f..adfa6aedc 100644
--- a/packages/select/package.json
+++ b/packages/select/package.json
@@ -13,6 +13,7 @@
   "repository": "https://github.com/element-component/element/tree/master/packages/select",
   "devDependencies": {
     "throttle-debounce": "^1.0.1",
-    "vue-clickoutside": "0.0.4"
+    "vue-clickoutside": "0.0.4",
+    "wind-dom": "0.0.3"
   }
 }
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 0f700ecf6..77fe1ba9d 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -68,6 +68,7 @@
   import ElTag from 'packages/tag/index.js';
   import debounce from 'throttle-debounce/debounce';
   import Clickoutside from 'main/utils/clickoutside';
+  import { addClass, removeClass } from 'wind-dom/src/class';
 
   export default {
     mixins: [emitter],
@@ -93,10 +94,10 @@
         if (icon) {
           if (criteria) {
             icon.addEventListener('click', this.deleteSelected);
-            icon.classList.add('is-show-close');
+            addClass(icon, 'is-show-close');
           } else {
             icon.removeEventListener('click', this.deleteSelected);
-            icon.classList.remove('is-show-close');
+            removeClass(icon, 'is-show-close');
           }
         }
         return criteria;
@@ -270,7 +271,7 @@
         if (!val) {
           this.$refs.reference.$el.querySelector('input').blur();
           if (this.$el.querySelector('.el-input__icon')) {
-            this.$el.querySelector('.el-input__icon').classList.remove('is-reverse');
+            removeClass(this.$el.querySelector('.el-input__icon'), 'is-reverse');
           }
           this.broadcast('select-dropdown', 'destroyPopper');
           if (this.$refs.input) {
@@ -287,7 +288,7 @@
           }
         } else {
           if (this.$el.querySelector('.el-input__icon')) {
-            this.$el.querySelector('.el-input__icon').classList.add('is-reverse');
+            addClass(this.$el.querySelector('.el-input__icon'), 'is-reverse');
           }
           this.broadcast('select-dropdown', 'updatePopper');
           if (this.filterable) {
diff --git a/packages/slider/src/main.vue b/packages/slider/src/main.vue
index 73bd7ff74..70f3ec4f5 100644
--- a/packages/slider/src/main.vue
+++ b/packages/slider/src/main.vue
@@ -30,6 +30,7 @@
   import Popper from 'main/utils/popper';
   import ElInputNumber from 'packages/input-number/index.js';
   import { getStyle } from 'wind-dom/src/style';
+  import { addClass, removeClass } from 'wind-dom/src/class';
 
   export default {
     name: 'ElSlider',
@@ -125,8 +126,8 @@
         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]);
+        addClass(this.popper._popper, placement);
+        removeClass(this.popper._popper, placementMap[placement]);
         this.popper._popper.style.transformOrigin = `center ${ origin }`;
       },