Merge pull request #467 from QingWei-Li/fix/date-picker-style

DatePicker: fix panel style, #318

CHANGELOG.md

@@ -7,6 +7,10 @@
 - 修复 Form reset method 对日期控件不起效的问题
 - 修复 Dialog 和 Message Box 在 body 无溢出时错误地添加 padding-right 的问题
 - 修复 Message Box 的 prompt 在打开时会携带之前的验证状态的问题
+- 修复 Clickoutside 性能问题 #296
+- 修复 Tooltip/Popover 首次渲染的箭头位置 #412
+- 修复 Autocomplete 的弹出框不会消失 #439
+- 修复 DatePicker 弹出框样式溢出边框 #318
 
 #### 非兼容性更新
 

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

@@ -26,8 +26,12 @@
       width: 100%;
     }
 
-    @e editor {
+    @e editor-wrap {
       flex: 1;
+      position: relative;
+    }
+
+    @e editor {
       margin: 0 5px;
       position: relative;
       border: 1px solid #c0ccda;

packages/date-picker/src/panel/date-range.vue

@@ -23,17 +23,15 @@
               <input
                 placeholder="开始日期"
                 class="el-date-range-picker__editor"
-                v-model="leftVisibleDate"
+                v-model.lazy="leftVisibleDate"
                 @input="handleDateInput($event, 'min')"
                 @change="handleDateChange($event, 'min')"/>
-              <span
-                class="el-date-range-picker__time-picker-wrap"
-                v-clickoutside="closeLeftTimePicker">
+              <span class="el-date-range-picker__time-picker-wrap">
                 <input
                   placeholder="开始时间"
                   class="el-date-range-picker__editor"
-                  v-model="leftVisibleTime"
-                  @focus="leftTimePickerVisible = true"
+                  v-model.lazy="leftVisibleTime"
+                  @focus="leftTimePickerVisible = !leftTimePickerVisible"
                   @change="handleTimeChange($event, 'min')"/>
                 <time-picker
                   :picker-width="leftPickerWidth"
@@ -50,19 +48,17 @@
                 ref="leftInput"
                 placeholder="结束日期"
                 class="el-date-range-picker__editor"
-                v-model="rightVisibleDate"
+                v-model.lazy="rightVisibleDate"
                 :readonly="!minDate"
                 @input="handleDateInput($event, 'max')"
                 @change="handleDateChange($event, 'max')" />
-              <span
-                class="el-date-range-picker__time-picker-wrap"
-                v-clickoutside="closeRightTimePicker">
+              <span class="el-date-range-picker__time-picker-wrap">
                 <input
                   ref="rightInput"
                   placeholder="结束时间"
                   class="el-date-range-picker__editor"
-                  v-model="rightVisibleTime"
-                  @focus="minDate && (rightTimePickerVisible = true)"
+                  v-model.lazy="rightVisibleTime"
+                  @focus="minDate && (rightTimePickerVisible = !rightTimePickerVisible)"
                   :readonly="!minDate"
                   @change="handleTimeChange($event, 'max')" />
                 <time-picker
@@ -257,10 +253,6 @@
       }
     },
 
-    directives: {
-      Clickoutside: require('element-ui/src/utils/clickoutside').default
-    },
-
     data() {
       return {
         leftPickerWidth: 0,
@@ -332,14 +324,6 @@
         return $t.apply(this, args);
       },
 
-      closeLeftTimePicker() {
-        this.leftTimePickerVisible = false;
-      },
-
-      closeRightTimePicker() {
-        this.rightTimePickerVisible = false;
-      },
-
       handleDateInput(event, type) {
         const value = event.target.value;
         const parsedValue = parseDate(value, 'yyyy-MM-dd');

packages/date-picker/src/panel/date.vue

@@ -21,16 +21,18 @@
         </div>
         <div class="el-picker-panel__body">
          <div class="el-date-picker__time-header" v-if="showTime">
-            <input
-              :placehoder="$t('datepicker.selectDate')"
-              type="text"
-              v-model="visibleDate"
-              class="el-date-picker__editor">
-            <span style="position: relative" v-clickoutside="closeTimePicker">
+            <span class="el-date-picker__editor-wrap">
+              <input
+                :placehoder="$t('datepicker.selectDate')"
+                type="text"
+                v-model.lazy="visibleDate"
+                class="el-date-picker__editor">
+            </span>
+            <span class="el-date-picker__editor-wrap">
               <input
                 ref="input"
-                @focus="timePickerVisible = true"
-                v-model="visibleTime"
+                @focus="timePickerVisible = !timePickerVisible"
+                v-model.lazy="visibleTime"
                 :placehoder="$t('datepicker.selectTime')"
                 type="text"
                 class="el-date-picker__editor">
@@ -162,10 +164,6 @@
       }
     },
 
-    directives: {
-      Clickoutside: require('element-ui/src/utils/clickoutside').default
-    },
-
     methods: {
       $t(...args) {
         return $t.apply(this, args);
@@ -320,10 +318,6 @@
           this.year = this.date.getFullYear();
           this.month = this.date.getMonth();
         }
-      },
-
-      closeTimePicker() {
-        this.timePickerVisible = false;
       }
     },