Merge pull request #366 from QingWei-Li/fix/datepicker-dropdown-steps

DatePicker/Dropdown/Steps/Badge(docs): fix style bug

examples/docs/zh-cn/badge.md

@@ -21,15 +21,20 @@
   <el-button size="small">回复</el-button>
 </el-badge>
 
-<el-dropdown text="点我查看" type="text" :icon-separate="false" trigger="click">
+<el-dropdown trigger="click">
-  <el-dropdown-item class="clearfix">
+  <span class="el-dropdown-link">
-    评论
+    点我查看<i class="el-icon-caret-bottom el-icon-right"></i>
-    <el-badge class="mark" :value="12" />
+  </span>
-  </el-dropdown-item>
+  <el-dropdown-menu slot="dropdown">
-  <el-dropdown-item class="clearfix">
+    <el-dropdown-item class="clearfix">
-    回复
+      评论
-    <el-badge class="mark" :value="3" />
+      <el-badge class="mark" :value="12" />
-  </el-dropdown-item>
+    </el-dropdown-item>
+    <el-dropdown-item class="clearfix">
+      回复
+      <el-badge class="mark" :value="3" />
+    </el-dropdown-item>
+  </el-dropdown-menu>
 </el-dropdown>
 ```
 :::

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

@@ -5,8 +5,12 @@
   @b date-picker {
     min-width: 254px;
 
+    &.has-sidebar.has-time {
+      min-width: 434px;
+    }
+
     &.has-sidebar {
-      min-width: 368px;
+      min-width: 370px;
     }
 
     &.has-time {

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

@@ -2,6 +2,20 @@
 
 @component-namespace el {
   @b date-range-picker {
+    min-width: 520px;
+
+    &.has-sidebar.has-time {
+      min-width: 766px;
+    }
+
+    &.has-sidebar {
+      min-width: 620px;
+    }
+
+    &.has-time {
+      min-width: 660px;
+    }
+
     table {
       table-layout: fixed;
       width: 100%;

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

@@ -9,11 +9,6 @@
     border-radius: 2px;
     line-height: 20px;
     margin: 5px 0;
-    min-width: 513px;
-
-    &.has-sidebar {
-      min-width: 620px;
-    }
 
     @e body, body-wrapper {
       &::after {
@@ -68,6 +63,7 @@
       cursor: pointer;
       background-color: transparent;
       outline: none;
+      font-size: 12px;
 
       &[disabled] {
         color: #cccccc;

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

@@ -2,7 +2,7 @@
 
 @component-namespace el {
   @b time-range-picker {
-    width: 354px;
+    min-width: 354px;
     overflow: visible;
 
     @e content {

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

@@ -36,6 +36,7 @@
                   @focus="leftTimePickerVisible = true"
                   @change="handleTimeChange($event, 'min')"/>
                 <time-picker
+                  :picker-width="leftPickerWidth"
                   ref="lefttimepicker"
                   :date="minDate"
                   @pick="handleLeftTimePick"
@@ -46,6 +47,7 @@
             <span class="el-icon-arrow-right"></span>
             <span class="el-date-range-picker__editors-wrap is-right">
               <input
+                ref="leftInput"
                 placeholder="结束日期"
                 class="el-date-range-picker__editor"
                 v-model="rightVisibleDate"
@@ -56,6 +58,7 @@
                 class="el-date-range-picker__time-picker-wrap"
                 v-clickoutside="closeRightTimePicker">
                 <input
+                  ref="rightInput"
                   placeholder="结束时间"
                   class="el-date-range-picker__editor"
                   v-model="rightVisibleTime"
@@ -63,6 +66,7 @@
                   :readonly="!minDate"
                   @change="handleTimeChange($event, 'max')" />
                 <time-picker
+                  :picker-width="rightPickerWidth"
                   ref="righttimepicker"
                   :date="maxDate"
                   @pick="handleRightTimePick"
@@ -259,6 +263,8 @@
 
     data() {
       return {
+        leftPickerWidth: 0,
+        rightPickerWidth: 0,
         date: new Date(),
         minDate: '',
         maxDate: '',
@@ -275,11 +281,25 @@
         disabledDate: '',
         leftTimePickerVisible: false,
         rightTimePickerVisible: false,
-        width: ''
+        width: 0
       };
     },
 
     watch: {
+      showTime(val) {
+        if (!val) return;
+        this.$nextTick(_ => {
+          const leftInputElm = this.$refs.leftInput;
+          const rightInputElm = this.$refs.rightInput;
+          if (leftInputElm) {
+            this.leftPickerWidth = leftInputElm.getBoundingClientRect().width + 10;
+          }
+          if (rightInputElm) {
+            this.rightPickerWidth = rightInputElm.getBoundingClientRect().width + 10;
+          }
+        });
+      },
+
       minDate() {
         this.$nextTick(() => {
           if (this.maxDate && this.maxDate < this.minDate) {

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

@@ -2,7 +2,9 @@
   <transition name="md-fade-bottom" @after-leave="$emit('dodestroy')">
     <div
       v-show="visible"
-      :style="{ width: width + 'px' }"
+      :style="{
+        width: width + 'px'
+      }"
       class="el-picker-panel el-date-picker"
       :class="{
         'has-sidebar': $slots.sidebar || shortcuts,
@@ -26,6 +28,7 @@
               class="el-date-picker__editor">
             <span style="position: relative" v-clickoutside="closeTimePicker">
               <input
+                ref="input"
                 @focus="timePickerVisible = true"
                 v-model="visibleTime"
                 :placehoder="$t('datepicker.selectTime')"
@@ -34,6 +37,7 @@
               <time-picker
                 ref="timepicker"
                 :date="date"
+                :picker-width="pickerWidth"
                 @pick="handleTimePick"
                 :visible="timePickerVisible">
               </time-picker>
@@ -120,6 +124,16 @@
 
   export default {
     watch: {
+      showTime(val) {
+        if (!val) return;
+        this.$nextTick(_ => {
+          const inputElm = this.$refs.input;
+          if (inputElm) {
+            this.pickerWidth = inputElm.getBoundingClientRect().width + 10;
+          }
+        });
+      },
+
       value(newVal) {
         if (this.selectionMode === 'day' && newVal instanceof Date) {
           this.date = newVal;
@@ -333,6 +347,7 @@
 
     data() {
       return {
+        pickerWidth: 0,
         date: new Date(),
         value: '',
         showTime: false,
@@ -345,7 +360,7 @@
         month: null,
         week: null,
         timePickerVisible: false,
-        width: ''
+        width: 0
       };
     },
 

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

@@ -93,7 +93,7 @@
         minSeconds: minTime.getSeconds(),
         format: 'HH:mm:ss',
         visible: false,
-        width: ''
+        width: 0
       };
     },
 

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

@@ -93,7 +93,7 @@
         value: '',
         visible: false,
         minTime: '',
-        width: ''
+        width: 0
       };
     },
 

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

@@ -40,12 +40,12 @@
     },
 
     props: {
+      pickerWidth: {},
       date: {
         default() {
           return new Date();
         }
       },
-
       visible: Boolean
     },
 
@@ -54,6 +54,10 @@
         this.currentVisible = val;
       },
 
+      pickerWidth(val) {
+        this.width = val;
+      },
+
       value(newVal) {
         let date;
         if (newVal instanceof Date) {
@@ -83,7 +87,7 @@
         selectableRange: [],
         currentDate: this.$options.defaultValue || this.date,
         currentVisible: this.visible,
-        width: ''
+        width: this.pickerWidth || 0
       };
     },
 

packages/dropdown/src/dropdown-menu.vue

@@ -22,7 +22,7 @@
     },
 
     mounted() {
-      this.popperElm = this.$el;
+      this.$parent.popperElm = this.popperElm = this.$el;
       this.referenceElm = this.$parent.$el;
     },
 

packages/steps/src/step.vue

@@ -60,8 +60,8 @@ export default {
   data() {
     return {
       index: -1,
-      style: { width: 0, height: 0 },
+      style: { width: '', height: '' },
-      lineStyle: { width: 0, height: 0 },
+      lineStyle: { width: '', height: '' },
       mainOffset: 0,
       currentStatus: this.status
     };