Merge pull request #98 from QingWei-Li/feat/fix-buglist

Feat/fix buglist

examples/docs/input.md

@@ -70,7 +70,7 @@
 
 ## 禁用状态
 
-<div class="demo-box demo-input">  
+<div class="demo-box demo-input">
   <el-input
     :disabled="true"
     placeholder="请输入内容"

examples/docs/tooltip.md

@@ -21,7 +21,7 @@ Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们
 
 三种箭头方位：`start`, `end`，默认为空
 
-如`top center`即`placement="top"`，`left top`即`placement="left-start"`。
+如`top center`即`placement="top"`，`left top`即`placement="left-end"`。
 
 下面是完整的九个示例，可以通过该示例来理解上面的说明，选择你要的效果：
 
@@ -56,47 +56,47 @@ Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们
 
 <div class="box">
   <div class="top">
-    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
+    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-end">
       <el-button>上左</el-button>
     </el-tooltip>
     <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
       <el-button>上边</el-button>
     </el-tooltip>
-    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
+    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-start">
       <el-button>上右</el-button>
     </el-tooltip>
   </div>
   <div class="left">
-    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
+    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-end">
       <el-button>左上</el-button>
     </el-tooltip>
     <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
       <el-button>左边</el-button>
     </el-tooltip>
-    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
+    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-start">
       <el-button>左下</el-button>
     </el-tooltip>
   </div>
 
   <div class="right">
-    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
+    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-end">
       <el-button>右上</el-button>
     </el-tooltip>
     <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
       <el-button>右边</el-button>
     </el-tooltip>
-    <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
+    <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-start">
       <el-button>右下</el-button>
     </el-tooltip>
   </div>
   <div class="bottom">
-    <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
+    <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-end">
       <el-button>下左</el-button>
     </el-tooltip>
     <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
       <el-button>下边</el-button>
     </el-tooltip>
-    <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
+    <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-start">
       <el-button>下右</el-button>
     </el-tooltip>
   </div>

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

@@ -35,7 +35,7 @@
     @e time-header {
       position: relative;
       border-bottom: 1px solid var(--datepicker-inner-border-color);
-      font-size: 0;
+      font-size: 12px;
       padding: 8px 5px 5px 5px;
       display: flex;
     }

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

@@ -89,7 +89,7 @@
     @e time-header {
       position: relative;
       border-bottom: 1px solid var(--datepicker-inner-border-color);
-      font-size: 0;
+      font-size: 12px;
       padding: 8px 5px 5px 5px;
       display: flex;
 

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

@@ -85,6 +85,7 @@
     }
 
     @e link-btn {
+      cursor: pointer;
       color: #55a4ff;
       text-decoration: none;
       padding: 15px;

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

@@ -7,6 +7,7 @@
         <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
         <div class="el-picker-panel__sidebar" v-if="shortcuts">
           <button
+            type="button"
             class="el-picker-panel__shortcut"
             v-for="shortcut in shortcuts"
             @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
@@ -20,7 +21,9 @@
                 v-model="leftVisibleDate"
                 @input="handleDateInput($event, 'min')"
                 @change="handleDateChange($event, 'min')"/>
-              <span class="el-date-range-picker__time-picker-wrap">
+              <span
+                class="el-date-range-picker__time-picker-wrap"
+                v-clickoutside="closeLeftTimePicker">
                 <input
                   placeholder="开始时间"
                   class="el-date-range-picker__editor"
@@ -28,10 +31,10 @@
                   @focus="leftTimePickerVisible = true"
                   @change="handleTimeChange($event, 'min')"/>
                 <time-picker
-                  v-ref:lefttimepicker
+                  ref="lefttimepicker"
                   :date="minDate"
                   @pick="handleLeftTimePick"
-                  v-show="leftTimePickerVisible">
+                  :visible="leftTimePickerVisible">
                 </time-picker>
               </span>
             </span>
@@ -44,7 +47,9 @@
                 :readonly="!minDate"
                 @input="handleDateInput($event, 'max')"
                 @change="handleDateChange($event, 'max')" />
-              <span class="el-date-range-picker__time-picker-wrap">
+              <span
+                class="el-date-range-picker__time-picker-wrap"
+                v-clickoutside="closeRightTimePicker">
                 <input
                   placeholder="结束时间"
                   class="el-date-range-picker__editor"
@@ -53,19 +58,21 @@
                   :readonly="!minDate"
                   @change="handleTimeChange($event, 'max')" />
                 <time-picker
-                  v-ref:righttimepicker
+                  ref="righttimepicker"
                   :date="maxDate"
                   @pick="handleRightTimePick"
-                  v-show="rightTimePickerVisible"></time-picker>
+                  :visible="rightTimePickerVisible"></time-picker>
               </span>
             </span>
           </div>
           <div class="el-picker-panel__content el-date-range-picker__content is-left">
             <div class="el-date-range-picker__header">
               <button
+                type="button"
                 @click="prevYear"
                 class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
               <button
+                type="button"
                 @click="prevMonth"
                 class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
               <div>{{ leftLabel }}</div>
@@ -85,9 +92,11 @@
           <div class="el-picker-panel__content el-date-range-picker__content is-right">
             <div class="el-date-range-picker__header">
               <button
+                type="button"
                 @click="nextYear"
                 class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
               <button
+                type="button"
                 @click="nextMonth"
                 class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
               <div>{{ rightLabel }}</div>
@@ -106,11 +115,11 @@
         </div>
       </div>
       <div class="el-picker-panel__footer" v-if="showTime">
-        <a
-          href="JavaScript:"
+        <!-- <a
           class="el-picker-panel__link-btn"
-          @click="changeToToday">{{ $t('datepicker.today') }}</a>
+          @click="changeToToday">{{ $t('datepicker.today') }}</a> -->
         <button
+          type="button"
           class="el-picker-panel__btn"
           @click="handleConfirm"
           :disabled="btnDisabled">确定</button>
@@ -237,6 +246,10 @@
       }
     },
 
+    directives: {
+      Clickoutside: require('main/utils/clickoutside').default
+    },
+
     data() {
       return {
         date: new Date(),
@@ -267,11 +280,11 @@
       },
 
       leftTimePickerVisible(val) {
-        if (val) this.$refs.lefttimepicker.ajustScrollTop();
+        if (val) this.$nextTick(() => this.$refs.lefttimepicker.ajustScrollTop());
       },
 
       rightTimePickerVisible(val) {
-        if (val) this.$refs.righttimepicker.ajustScrollTop();
+        if (val) this.$nextTick(() => this.$refs.righttimepicker.ajustScrollTop());
       },
 
       value(newVal) {
@@ -288,6 +301,14 @@
     methods: {
       $t,
 
+      closeLeftTimePicker() {
+        this.leftTimePickerVisible = false;
+      },
+
+      closeRightTimePicker() {
+        this.rightTimePickerVisible = false;
+      },
+
       handleDateInput(event, type) {
         const value = event.target.value;
         const parsedValue = parseDate(value, 'yyyy-MM-dd');
@@ -379,37 +400,29 @@
         this.rightTimePickerVisible = false;
       },
 
-      handleLeftTimePick(value) {
-        if (!this.minDate) {
-          this.minDate = new Date();
-        }
-        this.minDate.setHours(value.getHours());
-        this.minDate.setMinutes(value.getMinutes());
-        this.minDate.setSeconds(value.getSeconds());
+      handleLeftTimePick(value, visible, first) {
+        this.minDate = value || this.minDate || new Date();
 
-        this.minDate = new Date(this.minDate);
-        this.leftTimePickerVisible = false;
+        if (!first) {
+          this.leftTimePickerVisible = visible;
+        }
       },
 
-      handleRightTimePick(value) {
+      handleRightTimePick(value, visible, first) {
         if (!this.maxDate) {
           const now = new Date();
           if (now >= this.minDate) {
             this.maxDate = new Date();
-          } else {
-
           }
         }
 
         if (this.maxDate) {
-          this.maxDate.setHours(value.getHours());
-          this.maxDate.setMinutes(value.getMinutes());
-          this.maxDate.setSeconds(value.getSeconds());
-
-          this.maxDate = new Date(this.maxDate);
+          this.maxDate = value;
         }
 
-        this.rightTimePickerVisible = false;
+        if (!first) {
+          this.rightTimePickerVisible = visible;
+        }
       },
 
       prevMonth() {

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

@@ -7,6 +7,7 @@
         <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
         <div class="el-picker-panel__sidebar" v-if="shortcuts">
           <button
+            type="button"
             class="el-picker-panel__shortcut"
             v-for="shortcut in shortcuts"
             @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
@@ -35,10 +36,12 @@
           </div>
           <div class="el-date-picker__header" v-show="currentView !== 'time'">
             <button
+              type="button"
               @click="prevYear"
               class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left">
             </button>
             <button
+              type="button"
               @click="prevMonth"
               v-show="currentView === 'date'"
               class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left">
@@ -52,10 +55,12 @@
               class="el-date-picker__header-label"
               :class="{ active: currentView === 'month' }">{{ month + 1 }}月</span>
             <button
+              type="button"
               @click="nextYear"
               class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right">
             </button>
             <button
+              type="button"
               @click="nextMonth"
               v-show="currentView === 'date'"
               class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right">
@@ -97,6 +102,7 @@
           class="el-picker-panel__link-btn"
           @click="changeToToday">{{ $t('datepicker.today') }}</a>
         <button
+          type="button"
           class="el-picker-panel__btn"
           @click="confirm">{{ $t('datepicker.confirm') }}</button>
       </div>

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

@@ -35,9 +35,11 @@
       </div>
       <div class="el-time-panel__footer">
         <button
+          type="button"
           class="el-time-panel__btn cancel"
           @click="handleCancel()">取消</button>
         <button
+          type="button"
           class="el-time-panel__btn confirm"
           @click="handleConfirm()"
           :disabled="btnDisabled">确定</button>

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

 <template>
   <transition name="md-fade-bottom">
     <div
-      v-show="visible"
+      v-show="currentVisible"
       class="el-time-panel">
       <div class="el-time-panel__content">
         <time-spinner
@@ -16,9 +16,11 @@
       </div>
       <div class="el-time-panel__footer">
         <button
+          type="button"
           class="el-time-panel__btn cancel"
           @click="handleCancel()">取消</button>
         <button
+          type="button"
           class="el-time-panel__btn confirm"
           @click="handleConfirm()">确定</button>
       </div>
@@ -40,10 +42,14 @@
         default: new Date()
       },
 
-      visible: false
+      visible: Boolean
     },
 
     watch: {
+      visible(val) {
+        this.currentVisible = val;
+      },
+
       value(newVal) {
         let date;
         if (newVal instanceof Date) {
@@ -70,7 +76,9 @@
         hours: 0,
         minutes: 0,
         seconds: 0,
-        selectableRange: []
+        selectableRange: [],
+        currentDate: this.date,
+        currentVisible: this.visible
       };
     },
 
@@ -87,16 +95,16 @@
 
       handleChange(date) {
         if (date.hours !== undefined) {
-          this.date.setHours(date.hours);
-          this.hours = this.date.getHours();
+          this.currentDate.setHours(date.hours);
+          this.hours = this.currentDate.getHours();
         }
         if (date.minutes !== undefined) {
-          this.date.setMinutes(date.minutes);
-          this.minutes = this.date.getMinutes();
+          this.currentDate.setMinutes(date.minutes);
+          this.minutes = this.currentDate.getMinutes();
         }
         if (date.seconds !== undefined) {
-          this.date.setSeconds(date.seconds);
-          this.seconds = this.date.getSeconds();
+          this.currentDate.setSeconds(date.seconds);
+          this.seconds = this.currentDate.getSeconds();
         }
 
         this.handleConfirm(true);
@@ -107,7 +115,7 @@
       },
 
       handleConfirm(visible = false, first) {
-        const date = new Date(limitRange(this.date, this.selectableRange));
+        const date = new Date(limitRange(this.currentDate, this.selectableRange));
 
         this.$emit('pick', date, visible, first);
       },
@@ -122,12 +130,12 @@
     },
 
     created() {
-      !this.date && Vue.set(this, 'date', new Date());
-      !this.visible && Vue.set(this, 'visible', false);
+      !this.currentDate && Vue.set(this, 'currentDate', new Date());
+      !this.currentVisible && Vue.set(this, 'currentVisible', false);
 
-      this.hours = this.date.getHours();
-      this.minutes = this.date.getMinutes();
-      this.seconds = this.date.getSeconds();
+      this.hours = this.currentDate.getHours();
+      this.minutes = this.currentDate.getMinutes();
+      this.seconds = this.currentDate.getSeconds();
     },
 
     mounted() {

packages/dropdown/src/dropdown.vue

@@ -41,7 +41,6 @@
   import ElButton from 'packages/button/index.js';
   import ElButtonGroup from 'packages/button-group/index.js';
   import ElDropdownMenu from './dropdown-menu.vue';
-  import Vue from 'vue';
   import Clickoutside from 'main/utils/clickoutside';
 
   export default {

packages/menu/src/menu.vue

@@ -67,7 +67,7 @@
         this.$emit('select', key, keyPath);
 
         if (this.router) {
-          this.$route.router.go(key);
+          this.$router.push(key);
         }
       }
     },

packages/select/src/option.vue

@@ -6,7 +6,7 @@
     v-show="queryPassed"
     :class="{ 'selected': itemSelected, 'is-disabled': disabled, 'hover': parent.hoverIndex === index }">
     <slot>
-      <span>{{ label }}</span>
+      <span>{{ currentLabel }}</span>
     </slot>
   </li>
 </template>
@@ -40,7 +40,8 @@
       return {
         index: -1,
         queryPassed: true,
-        hitState: false
+        hitState: false,
+        currentLabel: this.label
       };
     },
 
@@ -92,7 +93,7 @@
       },
 
       queryChange(query) {
-        this.queryPassed = new RegExp(query, 'i').test(this.label);
+        this.queryPassed = new RegExp(query, 'i').test(this.currentLabel);
         if (!this.queryPassed) {
           this.parent.filteredOptionsCount--;
         }
@@ -106,7 +107,7 @@
     },
 
     created() {
-      this.label = this.label || ((typeof this.value === 'string' || typeof this.value === 'number') ? this.value : '');
+      this.currentLabel = this.currentLabel || ((typeof this.value === 'string' || typeof this.value === 'number') ? this.value : '');
       this.parent.options.push(this);
       this.parent.optionsCount++;
       this.parent.filteredOptionsCount++;

packages/select/src/select.vue

@@ -9,7 +9,7 @@
           :hit="item.hitState"
           type="primary"
           @click.native="deleteTag($event, item)"
-          close-transition>{{ item.label }}</el-tag>
+          close-transition>{{ item.currentLabel }}</el-tag>
       </transition-group>
       <input
         type="text"
@@ -290,7 +290,7 @@
               this.bottomOverflowBeforeHidden = this.selected.$el.getBoundingClientRect().bottom - this.$refs.popper.$el.getBoundingClientRect().bottom;
             }
             if (this.selected && this.selected.value) {
-              this.selectedLabel = this.selected.label;
+              this.selectedLabel = this.selected.currentLabel;
             }
           }
         } else {
@@ -360,7 +360,7 @@
           }
         } else {
           this.selected = option;
-          this.selectedLabel = option.label;
+          this.selectedLabel = option.currentLabel;
           this.hoverIndex = option.index;
         }
       },
@@ -402,12 +402,12 @@
       handleOptionSelect(option) {
         if (!this.multiple) {
           this.selected = option;
-          this.selectedLabel = option.label;
+          this.selectedLabel = option.currentLabel;
           this.visible = false;
         } else {
           let optionIndex = -1;
           this.selected.forEach((item, index) => {
-            if (item === option || item.label === option.label) {
+            if (item === option || item.currentLabel === option.currentLabel) {
               optionIndex = index;
             }
           });

packages/table/src/table.vue

@@ -196,6 +196,7 @@
         if (this.styleNode) {
           let styleSheet = this.styleNode.sheet;
 
+          if (!styleSheet) return;
           for (let i = 0, j = styleSheet.cssRules.length; i < j; i++) {
             styleSheet.deleteRule(0);
           }