Merge pull request #40 from Leopoldthecoder/next

update switch

examples/docs/select.md

@@ -115,7 +115,7 @@
           this.loading = true;
           setTimeout(() => {
             this.loading = false;
-            this.options5 = this.states.filter(item => item.toLowerCase().indexOf(query) > -1).map(item => { return { value: item, label: item }; });
+            this.options5 = this.states.filter(item => item.toLowerCase().indexOf(query.toLowerCase()) > -1).map(item => { return { value: item, label: item }; });
           }, 200);
         }
       }

examples/docs/switch.md

@@ -7,14 +7,26 @@
   }
 </style>
 
+<script>
+  export default {
+    data() {
+      return {
+        value1: true,
+        value2: true,
+        value3: true
+      }
+    }
+  };
+</script>
+
 ## 基本用法
 
 <div class="demo-box demo-switch">
-  <el-switch></el-switch>
+  <el-switch v-model="value1"></el-switch>
 </div>
 
 ```html
-<el-switch></el-switch>
+<el-switch v-model="value1"></el-switch>
 ```
 
 ## 禁用状态
@@ -36,13 +48,13 @@
 ## 自定义颜色
 
 <div class="demo-box demo-switch">
-  <el-switch on-color="#13ce66" off-color="#ff4949"></el-switch>
-  <el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text=""></el-switch>
+  <el-switch on-color="#13ce66" off-color="#ff4949" v-model="value2"></el-switch>
+  <el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text="" v-model="value3"></el-switch>
 </div>
 
 ```html
-<el-switch on-color="#13ce66" off-color="#ff4949"></el-switch>
-<el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text=""></el-switch>
+<el-switch on-color="#13ce66" off-color="#ff4949" v-model="value2"></el-switch>
+<el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text="" v-model="value3"></el-switch>
 ```
 
 ## API
@@ -58,4 +70,4 @@
 | on-color  | switch 打开时的背景色    | string   | | |
 | off-color  | switch 关闭时的背景色    | string   | | |
 | name  | 对应 input 的 name 属性    | string   | | |
-
+| change  | value 发生变化时的回调函数    | function   | | |

packages/date-picker/src/css/time-picker.css

@@ -25,6 +25,7 @@
         position: absolute;
         font-size: 14px;
         margin-top: -8px;
+        line-height: 16px;
         z-index: 1;
       }
 
@@ -43,6 +44,7 @@
       border-top: 1px solid var(--datepicker-inner-border-color);
       padding: 4px;
       height: 36px;
+      line-height: 25px;
       text-align: right;
       box-sizing: border-box;
     }

packages/select/src/select.vue

@@ -424,6 +424,9 @@
       toggleMenu() {
         if (!this.disabled) {
           this.visible = !this.visible;
+          if (this.remote && this.visible) {
+            this.selectedLabel = '';
+          }
         }
       },
 
@@ -475,6 +478,7 @@
         event.stopPropagation();
         this.selected = {};
         this.selectedLabel = '';
+        this.$emit('input', '');
         this.visible = false;
       },
 

packages/switch/src/component.vue

@@ -2,27 +2,29 @@
   <div class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText, 'el-switch--color': onColor || offColor }">
     <div class="el-switch__mask" v-show="disabled"></div>
     <input class="el-switch__input" type="checkbox" v-model="value" :name="name" :disabled="disabled" style="display: none;">
-    <span class="el-switch__core" v-el:core @click="handleMiscClick" :style="{ 'width': width + 'px' }">
-      <span class="el-switch__button" v-el:button></span>
+    <span class="el-switch__core" ref="core" @click="handleMiscClick" :style="{ 'width': coreWidth + 'px' }">
+      <span class="el-switch__button" ref="button"></span>
     </span>
-    <div
-      class="el-switch__label el-switch__label--left"
-      v-show="value"
-      @click="handleMiscClick"
-      :style="{ 'width': width + 'px' }"
-      transition="label-fade">
-      <i :class="[onIconClass]" v-if="onIconClass"></i>
-      <span v-if="onText">{{ onText }}</span>
-    </div>
-    <div
-      class="el-switch__label el-switch__label--right"
-      v-show="!value"
-      @click="handleMiscClick"
-      :style="{ 'width': width + 'px' }"
-      transition="label-fade">
-      <i :class="[offIconClass]" v-if="offIconClass"></i>
-      <span v-if="offText">{{ offText }}</span>
-    </div>
+    <transition name="label-fade">
+      <div
+        class="el-switch__label el-switch__label--left"
+        v-show="value"
+        @click="handleMiscClick"
+        :style="{ 'width': coreWidth + 'px' }">
+        <i :class="[onIconClass]" v-if="onIconClass"></i>
+        <span v-if="onText">{{ onText }}</span>
+      </div>
+    </transition>
+    <transition name="label-fade">
+      <div
+        class="el-switch__label el-switch__label--right"
+        v-show="!value"
+        @click="handleMiscClick"
+        :style="{ 'width': coreWidth + 'px' }">
+        <i :class="[offIconClass]" v-if="offIconClass"></i>
+        <span v-if="offText">{{ offText }}</span>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -71,6 +73,11 @@
         default: ''
       }
     },
+    data() {
+      return {
+        coreWidth: 0
+      };
+    },
     computed: {
       hasText() {
         return this.onText || this.offText;
@@ -82,30 +89,31 @@
           this.handleCoreColor();
         }
         this.handleButtonTransform();
+        this.$emit('change');
       }
     },
     methods: {
       handleMiscClick() {
         if (!this.disabled) {
-          this.value = !this.value;
+          this.$emit('input', !this.value);
         }
       },
       handleButtonTransform() {
-        this.$els.button.style.transform = this.value ? `translate3d(${ this.width - 20 }px, 2px, 0)` : 'translate3d(2px, 2px, 0)';
+        this.$refs.button.style.transform = this.value ? `translate3d(${ this.coreWidth - 20 }px, 2px, 0)` : 'translate3d(2px, 2px, 0)';
       },
       handleCoreColor() {
         if (this.value) {
-          this.$els.core.style.borderColor = this.onColor;
-          this.$els.core.style.backgroundColor = this.onColor;
+          this.$refs.core.style.borderColor = this.onColor;
+          this.$refs.core.style.backgroundColor = this.onColor;
         } else {
-          this.$els.core.style.borderColor = this.offColor;
-          this.$els.core.style.backgroundColor = this.offColor;
+          this.$refs.core.style.borderColor = this.offColor;
+          this.$refs.core.style.backgroundColor = this.offColor;
         }
       }
     },
-    ready() {
+    mounted() {
       if (this.width === 0) {
-        this.width = this.hasText ? 58 : 46;
+        this.coreWidth = this.hasText ? 58 : 46;
       }
       this.handleButtonTransform();
       if ((this.onColor || this.offColor) && !this.disabled) {

packages/theme-default/src/select.css

@@ -115,6 +115,9 @@
           right: 10px;
           font-family: 'element-icons';
           content: "\e920";
+          font-size: 13px;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
         }
       }
     }

packages/theme-default/src/switch.css

@@ -16,6 +16,7 @@
     }
 
     @e label {
+      transition: .2s;
       position: absolute;
       z-index: 10;
       size: 46px 22px;
@@ -111,12 +112,8 @@
       }
     }
 
-    & .label-fade-transition {
-      transition: .2s;
-    }
-
     & .label-fade-enter,
-    & .label-fade-leave {
+    & .label-fade-leave-active {
       opacity: 0;
     }
   }