DatePicker/DatetimePicker doc update

examples/docs/alert.md

@@ -172,7 +172,7 @@
 | description | 辅助性文字 | string | — | — |
 | closable | 是否可关闭 | boolean | — | true |
 | close-text | 关闭按钮自定义文本 | string | — | — |
-| showIcon | 是否显示图标 | boolean | — | false |
+| show-icon | 是否显示图标 | boolean | — | false |
 
 
 ### Events

examples/docs/date-picker.md

@@ -63,227 +63,203 @@
   };
 </script>
 
-## 日期点
-
-###  日
-
-以『日』为基本单位
-
-<el-date-picker
-  v-model="value1"
-  type="date"
-  placeholder="选择日期">
-</el-date-picker>
-
-```html
-<el-date-picker
-  v-model="value"
-  type="date"
-  placeholder="选择日期">
-</el-date-picker>
-```
-
-###  周
-
-以『周』为基本单位
-
-<el-date-picker
-  v-model="value2"
-  type="week"
-  format="yyyy 第 WW 周"
-  placeholder="选择周">
-</el-date-picker>
-
-```html
-<el-date-picker
-  v-model="value"
-  type="week"
-  format="yyyy 第 WW 周"
-  placeholder="选择周">
-</el-date-picker>
-```
-
-###  月
-
-以『月』为基本单位
-
-<el-date-picker
-  v-model="value3"
-  type="month"
-  placeholder="选择月">
-</el-date-picker>
-
-```html
-<el-date-picker
-  v-model="value"
-  type="month"
-  placeholder="选择月">
-</el-date-picker>
-```
-
-###  年
-
-以『年』为基本单位
-
-<el-date-picker
-  v-model="value4"
-  type="year"
-  placeholder="选择日期">
-</el-date-picker>
+<style>
+  .demo-block.demo-date-picker .source {
+    padding: 0;
+    display: flex;
+  }
+  
+  .demo-date-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    flex: 1;
+    &:last-child {
+      border-right: none;
+    }
+  }
+  
+  .demo-date-picker .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
 
-```html
-<el-date-picker
-  v-model="value"
-  type="year"
-  placeholder="选择日期">
-</el-date-picker>
-```
+## Date Picker 日期选择器
 
-###  含快捷选项
+用于选择或输入日期
 
-左侧区域可配置快捷选项，例如『今天』、『昨天』等
+###  选择日
 
-<el-date-picker
-  v-model="value5"
-  type="date"
-  placeholder="选择日期"
-  :picker-options="pickerOptions1">
-</el-date-picker>
+以「日」为基本单位，基础的日期选择控件
 
+:::demo 基本单位由`type`属性指定。快捷选项需配置`picker-options`对象中的`shortcuts`
 ```html
-<el-date-picker
-  v-model="value"
-  type="date"
-  placeholder="选择日期"
-  :picker-options="pickerOptions1">
-</el-date-picker>
+<template>
+  <div class="block">
+    <span class="demonstration">默认</span>
+    <el-date-picker
+      v-model="value1"
+      type="date"
+      placeholder="选择日期">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">带快捷选项</span>
+    <el-date-picker
+      v-model="value2"
+      type="date"
+      placeholder="选择日期"
+      :picker-options="pickerOptions1">
+    </el-date-picker>
+  </div>
+</template>
 
 <script>
-  module.exports = {
+  export default {
     data() {
-      return {
-        pickerOptions1: {
-          shortcuts: [{
-            text: '今天',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: '昨天',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.$emit('pick', date);
-            }
-          }, {
-            text: '一周前',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', date);
-            }
-          }]
-        },
-        value: ''
-      };
+     return {
+       pickerOptions1: {
+         shortcuts: [{
+           text: '今天',
+           onClick(picker) {
+             picker.$emit('pick', new Date());
+           }
+         }, {
+           text: '昨天',
+           onClick(picker) {
+             const date = new Date();
+             picker.$emit('pick', date.getTime() - 3600 * 1000 * 24);
+           }
+         }, {
+           text: '一周前',
+           onClick(picker) {
+             const date = new Date();
+             picker.$emit('pick', date.getTime() - 3600 * 1000 * 24 * 7);
+           }
+         }]
+       },
+       value1: '',
+       value2: '',
+     };
     }
-  };
+    };
 </script>
 ```
+:::
 
-## 日期范围
-
-###  日期范围
+###  其他日期单位
 
-在一个选择器中选择
-
-<el-date-picker
-  v-model="value6"
-  type="daterange"
-  placeholder="选择日期范围"
-  style="width: 220px">
-</el-date-picker>
+通过扩展基础的日期选择，可以选择周、月、年
 
+:::demo 
 ```html
-<el-date-picker
-  v-model="value"
-  type="daterange"
-  placeholder="选择日期范围"
-  style="width: 220px">
-</el-date-picker>
+<div class="block">
+  <span class="demonstration">周</span>
+  <el-date-picker
+    v-model="value3"
+    type="week"
+    format="yyyy 第 WW 周"
+    placeholder="选择周">
+  </el-date-picker>
+</div>
+<div class="block">
+  <span class="demonstration">月</span>
+  <el-date-picker
+    v-model="value4"
+    type="month"
+    placeholder="选择月">
+  </el-date-picker>
+</div>
+<div class="block">
+  <span class="demonstration">年</span>
+  <el-date-picker
+    v-model="value5"
+    type="year"
+    placeholder="选择年">
+  </el-date-picker>
+</div>
 ```
+:::
 
-###  含快捷选项
-
-左侧区域可配置快捷选项，例如『最近一周』、『最近一个月』等
+###  选择日期范围
 
-<el-date-picker
-  v-model="value7"
-  type="daterange"
-  placeholder="选择日期范围"
-  :picker-options="pickerOptions2"
-  style="width: 220px">
-</el-date-picker>
+可在一个选择器中便捷地选择一个时间范围
 
+:::demo 
 ```html
-<el-date-picker
-  v-model="value"
-  type="daterange"
-  placeholder="选择日期范围"
-  :picker-options="pickerOptions2"
-  style="width: 220px">
-</el-date-picker>
+<template>
+  <div class="block">
+    <span class="demonstration">默认</span>
+    <el-date-picker
+      v-model="value6"
+      type="daterange"
+      placeholder="选择日期范围"
+      style="width: 220px">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">带快捷选项</span>
+    <el-date-picker
+      v-model="value7"
+      type="daterange"
+      placeholder="选择日期范围"
+      :picker-options="pickerOptions2"
+      style="width: 220px">
+    </el-date-picker>
+  </div>
+</template>
 
 <script>
-  module.exports = {
+  export default {
     data() {
-      return {
-        pickerOptions2: {
-          shortcuts: [{
-            text: '最近一周',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: '最近一个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: '最近三个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
-        value: ''
-      };
+     return {
+       pickerOptions2: {
+         shortcuts: [{
+           text: '最近一周',
+           onClick(picker) {
+             const end = new Date();
+             const start = end.getTime() - 3600 * 1000 * 24 * 7;
+             picker.$emit('pick', [start, end]);
+           }
+         }, {
+           text: '最近一个月',
+           onClick(picker) {
+             const end = new Date();
+             const start = end.getTime() - 3600 * 1000 * 24 * 30;
+             picker.$emit('pick', [start, end]);
+           }
+         }, {
+           text: '最近三个月',
+           onClick(picker) {
+             const end = new Date();
+             const start = end.getTime() - 3600 * 1000 * 24 * 90;
+             picker.$emit('pick', [start, end]);
+           }
+         }]
+       },
+       value6: '',
+       value7: ''
+     };
     }
-  };
+    };
 </script>
 ```
+:::
 
-## API
+### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| value | 绑定值，需双向绑定 | String |   |  |
-| readonly | 只读 | Boolean |  | false |
-| placeholder | 占位内容 | String |  |  |
-| type | 显示类型 | String | year, month, date, datetime, week | date |
-| format | 时间日期格式化 | String | 年 `yyyy`, 月 `MM`, 日 `dd`, 小时 `HH`, 分 `mm`, 秒 `ss` | 'yyyy-MM-dd' |
-| shortcuts | 快捷选项列表，配置信息查看下表 | Object[] | | |
+| readonly | 只读 | boolean | - | false |
+| placeholder | 占位内容 | string | - | - |
+| type | 显示类型 | string | year/month/date/datetime/week | date |
+| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
+| shortcuts | 快捷选项列表，配置信息<br>查看下表 | object[] | - | - |
 
-### shortcuts
+### Shortcuts
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| text |  标题 | String | | |
-| onClick | 选中后会调用函数，参数是 vm，设置值通过触发 'pick' 事件。例如 vm.$emit('pick', new Date()) | Function | | |
+| text | 标题文本 | string | - | - |
+| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置<br>选择器的值。例如 vm.$emit('pick', new Date()) | function | | |

examples/docs/datetime-picker.md

@@ -72,142 +72,60 @@
   };
 </script>
 
-## 日期和时间点
-
-###  日期和时间点的选择（一）
-
-在两个选择器中选择日期与时间。
-
-<div class="demo-box">
-  <el-date-picker
-    v-model="value1"
-    type="date"
-    placeholder="选择日期">
-  </el-date-picker>
-  <el-time-picker
-    v-model="value1"
-    placeholder="选择时间">
-  </el-date-picker>
-</div>
-
-```html
-<el-date-picker
-  v-model="value"
-  type="date"
-  placeholder="选择日期">
-</el-date-picker>
-<el-time-picker
-  v-model="value"
-  placeholder="选择时间">
-</el-time-picker>
-```
-
-###  日期和时间点的选择（二）
-
-在一个选择器中选择日期与时间。
-
-<div class="demo-box">
-  <el-date-picker
-    v-model="value2"
-    type="datetime"
-    placeholder="选择日期时间">
-  </el-date-picker>
-</div>
-
-```html
-<el-date-picker
-  v-model="value"
-  type="datetime"
-  placeholder="选择日期时间">
-</el-date-picker>
-```
-
-###  含快捷选项（一）
-
-左侧区域可配置快捷选项，例如『今天』、『昨天』等。
-
-<div class="demo-box">
-  <el-date-picker
-   v-model="value3"
-    type="date"
-    :picker-options="pickerOptions1"
-    placeholder="选择日期">
-  </el-date-picker>
-  <el-time-picker
-   v-model="value3"
-    placeholder="选择时间">
-  </el-time-picker>
-</div>
-
-```html
-<el-date-picker
-  v-model="value"
-  type="date"
-  placeholder="选择日期"
- :picker-options="pickerOptions1">
-</el-date-picker>
-<el-time-picker
-  v-model="value"
-  placeholder="选择时间">
-</el-time-picker>
-
-<script>
-  module.exports = {
-    data() {
-      return {
-        pickerOptions1: {
-          shortcuts: [{
-            text: '今天',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: '昨天',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.$emit('pick', date);
-            }
-          }, {
-            text: '一周前',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', date);
-            }
-          }]
-        },
-        value: new Date()
-      };
+<style>
+.demo-block.demo-datetime-picker .source {
+    padding: 0;
+    display: flex;
+  }
+  
+  .demo-datetime-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    flex: 1;
+    &:last-child {
+      border-right: none;
     }
-  };
-</script>
-```
+  }
+  
+  .demo-datetime-picker .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
 
-###  含快捷选项（二）
+## 日期时间选择器
 
-左侧区域可配置快捷选项，例如『今天』、『昨天』等。
+在同一个选择器里选择日期和时间
 
-<div class="demo-box">
-  <el-date-picker
-    v-model="value4"
-    type="datetime"
-    placeholder="选择日期时间"
-    :picker-options="pickerOptions1">
-  </el-date-picker>
-</div>
+###  日期和时间点
 
+:::demo 通过设置`type`属性为`datetime`，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。
 ```html
-<el-date-picker
-  v-model="value"
-  type="datetime"
-  placeholder="选择日期时间"
-  :picker-options="pickerOptions1"
-  style="width: 300px;">
-</el-date-picker>
+<template>
+  <div class="block">
+    <span class="demonstration">默认</span>
+    <el-date-picker
+      v-model="value1"
+      type="datetime"
+      placeholder="选择日期时间">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">带快捷选项</span>
+    <el-date-picker
+      v-model="value2"
+      type="datetime"
+      placeholder="选择日期时间"
+      :picker-options="pickerOptions1">
+    </el-date-picker>
+  </div>
+</template>
 
 <script>
-  module.exports = {
+  export default {
     data() {
       return {
         pickerOptions1: {
@@ -220,274 +138,101 @@
             text: '昨天',
             onClick(picker) {
               const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.$emit('pick', date);
+              picker.$emit('pick', new Date(date.getTime() - 3600 * 1000 * 24));
             }
           }, {
             text: '一周前',
             onClick(picker) {
               const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', date);
+              picker.$emit('pick', new Date(date.getTime() - 3600 * 1000 * 24 * 7));
             }
           }]
         },
-        value: ''
+        value1: '',
+        value2: ''
       };
     }
   };
 </script>
 ```
+:::
 
-## 日期和时间范围
-
-###  日期和时间范围的选择（一）
-
-在两个选择器中选择。
-
-<div class="demo-box">
-  <el-date-picker
-    v-model="value5"
-    type="datetime"
-    placeholder="选择开始时间">
-  </el-date-picker>
-  <el-date-picker
-    v-model="value6"
-    type="datetime"
-    placeholder="选择结束时间">
-  </el-date-picker>
-</div>
-
-```html
-<el-date-picker
-  v-model="startTime"
-  type="datetime"
-  placeholder="选择开始时间">
-</el-date-picker>
-<el-date-picker
-  v-model="endTime"
-  type="datetime"
-  placeholder="选择结束时间">
-</el-date-picker>
-```
-
-###  日期和时间范围的选择（二）
-
-在一个选择器中选择。
-
-<div class="demo-box">
-  <el-date-picker
-    v-model="value7"
-    type="datetimerange"
-    placeholder="选择时间范围"
-    style="width:340px">
-  </el-date-picker>
-</div>
-
-```html
-<el-date-picker
-  v-model="value"
-  type="datetimerange"
-  placeholder="选择时间范围"
-  style="width:340px">
-</el-date-picker>
-```
-
-###  含快捷选项
-
-左侧区域可配置快捷选项，例如『最近一周』、『最近一个月』等。
-
-<div class="demo-box">
-  <el-date-picker
-    v-model="value8"
-    type="datetimerange"
-    :picker-options="pickerOptions2"
-    placeholder="选择时间范围"
-    style="width:340px">
-  </el-date-picker>
-</div>
+### 日期和时间范围
 
+:::demo 设置`type`为`datetimerange`即可选择日期和时间范围
 ```html
-<el-date-picker
-  v-model="value"
-  type="datetimerange"
-  :picker-options="pickerOptions2"
-  placeholder="选择时间范围"
-  style="width:340px">
-</el-date-picker>
+<template>
+  <div class="block">
+    <span class="demonstration">默认</span>
+    <el-date-picker
+      v-model="value3"
+      type="datetimerange"
+      placeholder="选择时间范围"
+      style="width:340px">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">带快捷选项</span>
+    <el-date-picker
+      v-model="value4"
+      type="datetimerange"
+      :picker-options="pickerOptions2"
+      placeholder="选择时间范围"
+      style="width:340px">
+    </el-date-picker>
+  </div>
+</template>
 
 <script>
-  module.exports = {
+  export default {
     data() {
       return {
-        value: '',
         pickerOptions2: {
           shortcuts: [{
             text: '最近一周',
             onClick(picker) {
               const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              const start = end.getTime() - 3600 * 1000 * 24 * 7;
               picker.$emit('pick', [start, end]);
             }
-          }, {
+           }, {
             text: '最近一个月',
             onClick(picker) {
               const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
+              const start = end.getTime() - 3600 * 1000 * 24 * 30;
+              picker.$emit('pick', [start, end]); 
             }
-          }, {
+           }, {
             text: '最近三个月',
             onClick(picker) {
               const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              const start = end.getTime() - 3600 * 1000 * 24 * 90;
               picker.$emit('pick', [start, end]);
             }
           }]
-        }
+        },
+        value3: '',
+        value4: ''
       };
     }
   };
 </script>
 ```
+:::
 
-###  日期范围和时间范围选择
-
-在两个选择器中分别选择日期范围和时间范围。
-
-<div class="demo-box">
-  <el-date-picker
-    v-model="value9"
-    type="daterange"
-    placeholder="选择日期范围"
-    style="width:220px">
-  </el-date-picker>
-  <el-time-picker
-    v-model="value10"
-    is-range
-    placeholder="选择时间范围">
-  </el-time-picker>
-</div>
-
-```html
-<el-date-picker
-  v-model="date"
-  type="daterange"
-  placeholder="选择日期范围"
-  style="width:220px">
-</el-date-picker>
-<el-time-picker
-  v-model="time"
-  is-range
-  placeholder="选择时间范围">
-</el-time-picker>
-```
-
-## 环比时间
-选择两个时间作为限制条件，以得到统计量在这两个时间段的环比数据。
-
-###  周环比
-
-<div class="demo-box">
-  <el-date-picker
-    v-model="value11"
-    type="week"
-    placeholder="选择开始周">
-  </el-date-picker>
-  <el-date-picker
-    v-model="value12"
-    type="week"
-    placeholder="选择结束周">
-  </el-date-picker>
-</div>
-
-```html
-<el-date-picker
-  v-model="startWeek"
-  type="week"
-  placeholder="选择开始周">
-</el-date-picker>
-<el-date-picker
-  v-model="endWeek"
-  type="week"
-  placeholder="选择结束周">
-</el-date-picker>
-```
-
-###  月环比
-
-<div class="demo-box">
-  <el-date-picker
-    v-model="value13"
-    type="month"
-    placeholder="选择开始月">
-  </el-date-picker>
-  <el-date-picker
-    v-model="value14"
-    type="month"
-    placeholder="选择结束月">
-  </el-date-picker>
-</div>
-
-```html
-<el-date-picker
-  v-model="startMonth"
-  type="month"
-  placeholder="选择开始月">
-</el-date-picker>
-<el-date-picker
-  v-model="endMonth"
-  type="month"
-  placeholder="选择结束月">
-</el-date-picker>
-```
-
-###  年环比
-
-<div class="demo-box">
-  <el-date-picker
-    v-model="value15"
-    type="year"
-    placeholder="选择开始年">
-  </el-date-picker>
-  <el-date-picker
-    v-model="value16"
-    type="year"
-    placeholder="选择结束年">
-  </el-date-picker>
-</div>
-
-```html
-<el-date-picker
-  v-model="startYear"
-  type="year"
-  placeholder="选择开始年">
-</el-date-picker>
-<el-date-picker
-  v-model="endYear"
-  type="year"
-  placeholder="选择结束年">
-</el-date-picker>
-```
-
-## API
+### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| value | 绑定值，需双向绑定 | String |   |  |
-| format | 时间日期格式化 | String | 年 `yyyy`, 月 `MM`, 日 `dd`, 小时 `HH`, 分 `mm`, 秒 `ss` | 'yyyy-MM-dd' |
-| type | 显示类型 | String | year, month, date, datetime, week | date |
-| readonly | 只读 | Boolean |  | false |
-| placeholder | 占位内容 | String |  |  |
-| shortcuts | 快捷选项列表，配置信息查看下表 | Object[] | | |
-
+| readonly | 只读 | boolean | - | false |
+| placeholder | 占位内容 | string | - | - |
+| type | 显示类型 | string | year/month/date/datetime/week | date |
+| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
+| shortcuts | 快捷选项列表，配置信息<br>查看下表 | object[] | - | - |
 
-### shortcuts
+### Shortcuts
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| text |  标题 | String | | |
-| onClick | 选中后会调用函数，参数是 vm，设置值通过触发 'pick' 事件。例如 vm.$emit('pick', new Date()) | Function | | |
+| text | 标题文本 | string | - | - |
+| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置<br>选择器的值。例如 vm.$emit('pick', new Date()) | function | | |
 
 

examples/docs/dialog.md

@@ -73,7 +73,7 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
 :::demo 需要设置`v-model`属性，它接收`Boolean`，当为`true`时显示 Dialog。Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题，它是可选的，默认值为空。
 
 ```html
-<el-button :plain="true" @click.native="dialogVisible = true">点击打开 Dialog</el-button>
+<el-button type="text" @click.native="dialogVisible = true">点击打开 Dialog</el-button>
 
 <el-dialog title="提示" v-model="dialogVisible">
   <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
@@ -91,7 +91,7 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
 
 ```html
 <!-- tiny -->
-<el-button :plain="true" @click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
+<el-button type="text" @click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
 
 <el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
   <span>这是一段内容</span>
@@ -102,7 +102,7 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
 </el-dialog>
 
 <!-- 全屏幕Dialog -->
-<el-button @click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
+<el-button type="text" @click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
 
 <el-dialog title="提示" v-model="dialogFullVisible" size="full">
   <img src="http://placekitten.com/1920/1280">
@@ -116,7 +116,7 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
 
 ```html
 <template>
-  <el-button @click.native="openDialog()">使用Dialog方法</el-button>
+  <el-button type="text" @click.native="openDialog()">使用Dialog方法</el-button>
 
   <el-dialog title="提示" v-model="dialogBindVisible" ref="dialogBind">
     <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
@@ -146,7 +146,7 @@ Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单
 :::demo
 ```html
 <!-- Table -->
-<el-button @click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
+<el-button type="text" @click.native="dialogTableVisible = true" type="text">打开嵌套表格的 Dialog</el-button>
 
 <el-dialog title="收货地址" v-model="dialogTableVisible">
   <el-table :data="gridData">
@@ -157,7 +157,7 @@ Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单
 </el-dialog>
 
 <!-- Form -->
-<el-button @click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
+<el-button type="text" @click.native="dialogFormVisible = true" type="text">打开嵌套表单的 Dialog</el-button>
 
 <el-dialog title="收货地址" v-model="dialogFormVisible">
   <el-form :models="form">
@@ -182,12 +182,12 @@ Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| title     | Dialog 的标题 | string    |                                  |         |
-| size      | Dialog 的大小 | string    | 'tiny', 'small', 'large', 'full' | 'small' |
-| modal     | 是否需要遮罩层   | boolean   | | true |
-| customClass      | Dialog 的自定义类名 | string    | | |
-| closeOnClickModal | 是否可以通过点击 modal 关闭 Dialog | boolean    |  | true |
-| closeOnPressEscape | 是否可以通过按下 ESC 关闭 Dialog | boolean    |  | true |
+| title     | Dialog 的标题 | string    |  -                               |  -      |
+| size      | Dialog 的大小 | string    | tiny/small/large/full | small |
+| modal     | 是否需要遮罩层   | boolean   | - | true |
+| custom-class      | Dialog 的自定义类名 | string    | - | - |
+| close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean    | - | true |
+| close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean    | - | true |
 
 ### Slot
 | name | 说明 |

examples/docs/loading.md

@@ -1,15 +1,8 @@
 <style>
   .el-loading-demo {
     border: solid 1px #999;
-    padding: 10px;
-    text-align: center;
-    margin-top: 10px;
-
-    p {
-      font-size: 30px;
-      color: #999;
-      margin: 10px 0;
-    }
+    border-radius: 4px;
+    height: 100px;
   }
 </style>
 
@@ -17,87 +10,63 @@
   export default {
     data() {
       return {
-        loading: false,
+        loading: true,
         loading2: false,
-        fullscreenLoading: false,
-        tableLoading: false,
-        tableData: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        }]
+        fullscreenLoading: false
       }
     },
 
     methods: {
-      loadTable() {
-        this.tableLoading = true;
-        setTimeout(() => {
-          this.tableLoading = false;
-        }, 2000);
-      },
-
       openFullScreen() {
         this.fullscreenLoading = true;
         setTimeout(() => {
           this.fullscreenLoading = false;
-        }, 2000);
+        }, 3000);
       }
     }
   }
 </script>
 ## Loading 加载
+
 加载数据时显示动效
 
-### 基本用法
+### 区域加载
+
+在表格等容器中加载数据时显示
 
-:::demo 在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可，默认状况下，Loading 遮罩会插入到绑定元素的子节点。
+:::demo 在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加 `body` 修饰符，可以使遮罩插入至 DOM 中的 body 上。
 
 ```html
-<el-button :plain="true" @click.native="loading = !loading">打开 / 关闭 loading</el-button>
+<template>
+  <div v-loading="loading" class="el-loading-demo"></div>
+</template>
 
-<div v-loading="loading" class="el-loading-demo">
-  <p>点击上面的按钮，本区域显示 loading 遮罩</p>
-</div>
+<script>
+  export default {
+    data() {
+      return {
+        loading: true
+      };
+    }
+  };
+</script>
 ```
 :::
 
-### 修饰符
+### 整页加载
 
-通过修饰符，我们可以使用全屏幕 Loading 或将 Loading 设置在 body 上。
+页面数据加载时显示
 
-:::demo Loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过添加 `body` 修饰符，可以使遮罩插入至 DOM 中的 body 上。当需要全屏遮罩时，可使用 `fullscreen` 修饰符（此时遮罩会插入至 body 上）
+:::demo 当需要全屏遮罩时，可使用 `fullscreen` 修饰符（此时遮罩会插入至 body 上）
 
 ```html
 <template>
-  <el-button :plain="true" @click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
-
   <el-button
-    :plain="true"
+    type="primary"
     @click.native="openFullScreen"
     v-loading.fullscreen="fullscreenLoading">
-    打开全屏 loading
+    显示整页加载，3 秒后消失
   </el-button>
-
-  <div v-loading.body="loading2" class="el-loading-demo">
-    <p>点击上面的按钮，本区域显示 loading 遮罩</p>
-  </div>
 </template>
 
 <script>
@@ -112,7 +81,7 @@
         this.fullscreenLoading = true;
         setTimeout(() => {
           this.fullscreenLoading = false;
-        }, 2000);
+        }, 3000);
       }
     }
   }

examples/docs/message-box.md

@@ -64,7 +64,7 @@
 ## Message box 信息提示
 模拟系统的消息提示框而实现的一套摸态对话框组件，用于消息提示、成功提示、错误提示、询问信息
 
-### 基本用法
+### 基础用法
 
 MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert`等功能：`$msgbox`，`$alert`，`$confirm`以及`$prompt`。
 
@@ -74,7 +74,7 @@ MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert
 
 ```html
 <template>
-  <el-button @click.native="open">打开 Alert</el-button>
+  <el-button type="text" @click.native="open">打开 Alert</el-button>
 </template>
 
 <script>
@@ -97,7 +97,7 @@ MessageBox 组件也拥有极高的定制性，我们可以传入`options`作为
 
 ```html
 <template>
-  <el-button @click.native="open2">打开 alert</el-button>
+  <el-button type="text" @click.native="open2">打开 alert</el-button>
 </template>
 
 <script>
@@ -120,7 +120,7 @@ MessageBox 组件也拥有极高的定制性，我们可以传入`options`作为
 
 ```html
 <template>
-  <el-button @click.native="open3">打开 confirm</el-button>
+  <el-button type="text" @click.native="open3">打开 confirm</el-button>
 </template>
 
 <script>
@@ -153,7 +153,7 @@ Prompt 框功能强大，可以处理简单的输入。
 
 ```html
 <template>
-  <el-button @click.native="open4">打开 prompt</el-button>
+  <el-button type="text" @click.native="open4">打开 prompt</el-button>
 </template>
 
 <script>
@@ -187,7 +187,7 @@ Msgbox 框是最基本的弹框，与 Alert 的区别在于 Alert 无法通过 E
 
 ```html
 <template>
-  <el-button @click.native="open5">打开 Message Box</el-button>
+  <el-button type="text" @click.native="open5">打开 Message Box</el-button>
 </template>
 
 <script>
@@ -229,17 +229,17 @@ import { MessageBox } from 'element-ui';
 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| title | MessageBox标题 | string | | |
-| message | MessageBox消息正文内容 | string | | |
-| type | 消息类型，用于显示图标 | string | 'success', 'info', 'warning', 'error' | |
-| showCancelButton | 是否显示取消按钮 | boolean | | false（以 confirm 和 prompt 方式调用时为 true） |
-| showConfirmButton | 是否显示确定按钮 | boolean | | true |
-| cancelButtonText | 取消按钮的文本内容 | string | | '取消' |
-| confirmButtonText | 确定按钮的文本内容 | string | | '确定' |
-| cancelButtonClass | 取消按钮的自定义类名 | string | | |
-| confirmButtonClass | 确定按钮的自定义类名 | string | | |
-| showInput | 是否显示输入框 | boolean | | false（以 prompt 方式调用时为 true）|
-| inputPlaceholder | 输入框的占位符 | string | | |
-| inputPattern | 输入框的校验表达式 | regexp | | |
-| inputValidator | 输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | | |
-| inputErrorMessage | 校验未通过时的提示文本 | string | | '输入的数据不合法!' |
+| title | MessageBox标题 | string | - | - |
+| message | MessageBox消息正文内容 | string | - | - |
+| type | 消息类型，用于显示图标 | string | success/info/<br>warning/error | - |
+| show-cancel-button | 是否显示取消按钮 | boolean | - | false（以 confirm 和 prompt 方式调用时为 true） |
+| show-confirm-button | 是否显示确定按钮 | boolean | - | true |
+| cancel-button-text | 取消按钮的文本内容 | string | - | 取消 |
+| confirm-button-text | 确定按钮的文本内容 | string | - | 确定 |
+| cancel-button-class | 取消按钮的自定义类名 | string | - | - |
+| confirm-button-class | 确定按钮的自定义类名 | string | - | - |
+| show-input | 是否显示输入框 | boolean | - | false（以 prompt 方式调用时为 true）|
+| input-placeholder | 输入框的占位符 | string | - | - |
+| input-pattern | 输入框的校验表达式 | regexp | - | - |
+| input-validator | 输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | - | - |
+| input-error-message | 校验未通过时的提示文本 | string | - | 输入的数据不合法! |

examples/docs/rate.md

@@ -89,21 +89,21 @@
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| max | 最大分值 | Number | - | 5 |
-| disabled | 是否为只读 | Boolean | - | false |
-| allow-half | 是否允许半选 | Boolean | - | false |
-| low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | Number | - | 2 |
-| high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | Number | - | 4 |
-| colors | icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色 | Array | - | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
-| void-color | 未选中 icon 的颜色 | String | - | #C6D1DE |
-| disabled-void-color | 只读时未选中 icon 的颜色 | String | - | #EFF2F7 |
-| icon-classes | icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名 | Array | - | ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'] |
-| void-icon-class | 未选中 icon 的类名 | String | - | el-icon-star-off |
-| disabled-void-icon-class | 只读时未选中 icon 的类名 | String | - | el-icon-star-on |
-| show-text | 是否显示辅助文字 | Boolean | - | false |
-| text-color | 辅助文字的颜色 | String | - | 1F2D3D |
-| texts | 辅助文字数组 | Array | - | ['极差', '失望', '一般', '满意', '惊喜'] |
-| text-template | 只读时的辅助文字模板 | String | - | {value} |
+| max | 最大分值 | number | - | 5 |
+| disabled | 是否为只读 | boolean | - | false |
+| allow-half | 是否允许半选 | boolean | - | false |
+| low-threshold | 低分和中等分数的界限值，值本身<br>被划分在低分中 | number | - | 2 |
+| high-threshold | 高分和中等分数的界限值，值本身<br>被划分在高分中 | number | - | 4 |
+| colors | icon 的颜色数组，共有 3 个元素，<br>为 3 个分段所对应的颜色 | array | - | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
+| void-color | 未选中 icon 的颜色 | string | - | #C6D1DE |
+| disabled-void-color | 只读时未选中 icon 的颜色 | string | - | #EFF2F7 |
+| icon-classes | icon 的类名数组，共有 3 个元素，<br>为 3 个分段所对应的类名 | array | - | ['el-icon-star-on', 'el-icon-star-on',<br>'el-icon-star-on'] |
+| void-icon-class | 未选中 icon 的类名 | string | - | el-icon-star-off |
+| disabled-void-icon-class | 只读时未选中 icon 的类名 | string | - | el-icon-star-on |
+| show-text | 是否显示辅助文字 | boolean | - | false |
+| text-color | 辅助文字的颜色 | string | - | 1F2D3D |
+| texts | 辅助文字数组 | array | - | ['极差', '失望', '一般', '满意', '惊喜'] |
+| text-template | 只读时的辅助文字模板 | string | - | {value} |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |

examples/docs/select.md

@@ -572,10 +572,8 @@
 | multiple | 是否多选 | boolean | - | false |
 | disabled | 是否禁用 | boolean | - | false |
 | clearable | 单选时是否可以清空选项 | boolean | - | false |
-| width | select 的宽度 | number | - | 180（单选）/220（多选） |
-| dropdown-width | 下拉菜单的宽度，不设置则与输入框同宽 | number | - | - |
 | name | select input 的 name 属性 | string | - | - |
-| placeholder | 占位符 | string | - | '请选择' |
+| placeholder | 占位符 | string | - | 请选择 |
 | filterable | 是否可搜索 | boolean | - | false |
 | filter-method | 自定义过滤方法 | function | - | - |
 | remote | 是否为远程搜索 | boolean | - | false |

examples/docs/slider.md

@@ -143,8 +143,8 @@
 | min | 最小值 | number | - | 0 |
 | max | 最大值 | number | - | 100 |
 | step | 步长 | number | - | 1 |
-| showInput | 是否显示输入框 | boolean | - | false |
-| showStops | 是否显示间断点 | boolean | - | false |
+| show-input | 是否显示输入框 | boolean | - | false |
+| show-stops | 是否显示间断点 | boolean | - | false |
 
 ## Events
 | 事件名称      | 说明    | 回调参数      |

examples/docs/time-picker.md

@@ -103,7 +103,6 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| value | 绑定值，需双向绑定 | string | - | - |
 | readonly | 只读 | boolean | - | false |
 | placeholder | 占位内容 | string | - | - |
 | format | 时间格式化 | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |

package.json

@@ -50,7 +50,7 @@
     "vue": "^2.0.0-rc.2",
     "vue-loader": "^9.3.2",
     "vue-markdown-loader": "^0.4.0",
-    "vue-popup": "^0.2.2",
+    "vue-popup": "^0.2.3",
     "vue-router": "^2.0.0-beta.2"
   }
 }

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

@@ -400,8 +400,22 @@
         this.rightTimePickerVisible = false;
       },
 
+      setTime(date, value) {
+        let oldDate = new Date(date.getTime());
+        let hour = value.getHours();
+        let minute = value.getMinutes();
+        let second = value.getSeconds();
+        oldDate.setHours(hour);
+        oldDate.setMinutes(minute);
+        oldDate.setSeconds(second);
+        return new Date(oldDate.getTime());
+      },
+
       handleLeftTimePick(value, visible, first) {
-        this.minDate = value || this.minDate || new Date();
+        this.minDate = this.minDate || new Date();
+        if (value) {
+          this.minDate = this.setTime(this.minDate, value);
+        }
 
         if (!first) {
           this.leftTimePickerVisible = visible;
@@ -416,8 +430,8 @@
           }
         }
 
-        if (this.maxDate) {
-          this.maxDate = value;
+        if (this.maxDate && value) {
+          this.maxDate = this.setTime(this.maxDate, value);
         }
 
         if (!first) {

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

@@ -209,7 +209,16 @@
       },
 
       handleTimePick(picker, visible, first) {
-        this.date = picker || this.date;
+        if (picker) {
+          let oldDate = new Date(this.date.getTime());
+          let hour = picker.getHours();
+          let minute = picker.getMinutes();
+          let second = picker.getSeconds();
+          oldDate.setHours(hour);
+          oldDate.setMinutes(minute);
+          oldDate.setSeconds(second);
+          this.date = new Date(oldDate.getTime());
+        }
 
         if (!first) {
           this.timePickerVisible = visible;

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

@@ -81,12 +81,12 @@
         minTime: minTime,
         maxTime: maxTime,
         btnDisabled: isDisabled(minTime, maxTime),
-        maxHours: minTime.getHours(),
-        maxMinutes: minTime.getMinutes(),
-        maxSeconds: minTime.getSeconds(),
-        minHours: maxTime.getHours(),
-        minMinutes: maxTime.getMinutes(),
-        minSeconds: maxTime.getSeconds(),
+        maxHours: maxTime.getHours(),
+        maxMinutes: maxTime.getMinutes(),
+        maxSeconds: maxTime.getSeconds(),
+        minHours: minTime.getHours(),
+        minMinutes: minTime.getMinutes(),
+        minSeconds: minTime.getSeconds(),
         format: 'HH:mm:ss',
         visible: false
       };

packages/dialog/package.json

@@ -12,6 +12,6 @@
   "author": "elemefe",
   "license": "MIT",
   "devDependencies": {
-    "vue-popup": "^0.2.2"
+    "vue-popup": "^0.2.3"
   }
 }

packages/loading/src/directive.js

@@ -1,5 +1,60 @@
 import Spinner from './spinner';
 exports.install = Vue => {
+  let toggleLoading = (el, binding) => {
+    if (binding.value) {
+      Vue.nextTick(() => {
+        if (binding.modifiers.fullscreen) {
+          el.originalPosition = document.body.style.position;
+          el.originalOverflow = document.body.style.overflow;
+
+          ['top', 'right', 'bottom', 'left'].forEach(property => {
+            el.maskStyle[property] = '0';
+          });
+          el.maskStyle.position = 'fixed';
+          el.spinnerStyle.position = 'fixed';
+
+          insertDom(document.body, el, binding);
+        } else {
+          if (binding.modifiers.body) {
+            el.originalPosition = document.body.style.position;
+
+            ['top', 'left'].forEach(property => {
+              let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
+              el.maskStyle[property] = el.getBoundingClientRect()[property] + document.body[scroll] + document.documentElement[scroll] + 'px';
+            });
+            ['height', 'width'].forEach(property => {
+              el.maskStyle[property] = el.getBoundingClientRect()[property] + 'px';
+            });
+
+            insertDom(document.body, el, binding);
+          } else {
+            el.originalPosition = el.style.position;
+
+            ['top', 'right', 'bottom', 'left'].forEach(property => {
+              el.maskStyle[property] = '0';
+            });
+
+            insertDom(el, el, binding);
+          }
+        }
+      });
+    } else {
+      if (el.domVisible) {
+        el.mask.style.display = 'none';
+        el.spinner.style.display = 'none';
+        el.domVisible = false;
+
+        if (binding.modifiers.fullscreen) {
+          document.body.style.overflow = el.originalOverflow;
+        }
+        if (binding.modifiers.fullscreen || binding.modifiers.body) {
+          document.body.style.position = el.originalPosition;
+        } else {
+          el.style.position = el.originalPosition;
+        }
+      }
+    }
+  };
   let insertDom = (parent, directive, binding) => {
     if (!directive.domVisible) {
       Object.keys(directive.maskStyle).forEach(property => {
@@ -27,7 +82,7 @@ exports.install = Vue => {
   };
 
   Vue.directive('loading', {
-    bind: function(el) {
+    bind: function(el, binding) {
       el.mask = document.createElement('div');
       el.mask.className = 'el-loading-mask';
       el.maskStyle = {
@@ -41,62 +96,11 @@ exports.install = Vue => {
       el.spinnerStyle = {
         position: 'absolute'
       };
+      toggleLoading(el, binding);
     },
 
     update: function(el, binding) {
-      if (binding.value) {
-        Vue.nextTick(() => {
-          if (binding.modifiers.fullscreen) {
-            el.originalPosition = document.body.style.position;
-            el.originalOverflow = document.body.style.overflow;
-
-            ['top', 'right', 'bottom', 'left'].forEach(property => {
-              el.maskStyle[property] = '0';
-            });
-            el.maskStyle.position = 'fixed';
-            el.spinnerStyle.position = 'fixed';
-
-            insertDom(document.body, el, binding);
-          } else {
-            if (binding.modifiers.body) {
-              el.originalPosition = document.body.style.position;
-
-              ['top', 'left'].forEach(property => {
-                let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
-                el.maskStyle[property] = el.getBoundingClientRect()[property] + document.body[scroll] + document.documentElement[scroll] + 'px';
-              });
-              ['height', 'width'].forEach(property => {
-                el.maskStyle[property] = el.getBoundingClientRect()[property] + 'px';
-              });
-
-              insertDom(document.body, el, binding);
-            } else {
-              el.originalPosition = el.style.position;
-
-              ['top', 'right', 'bottom', 'left'].forEach(property => {
-                el.maskStyle[property] = '0';
-              });
-
-              insertDom(el, el, binding);
-            }
-          }
-        });
-      } else {
-        if (el.domVisible) {
-          el.mask.style.display = 'none';
-          el.spinner.style.display = 'none';
-          el.domVisible = false;
-
-          if (binding.modifiers.fullscreen) {
-            document.body.style.overflow = el.originalOverflow;
-          }
-          if (binding.modifiers.fullscreen || binding.modifiers.body) {
-            document.body.style.position = el.originalPosition;
-          } else {
-            el.style.position = el.originalPosition;
-          }
-        }
-      }
+      toggleLoading(el, binding);
     },
 
     unbind: function(el, binding) {

packages/message-box/package.json

@@ -12,6 +12,6 @@
   "author": "elemefe",
   "license": "MIT",
   "dependencies": {
-    "vue-popup": "^0.2.2"
+    "vue-popup": "^0.2.3"
   }
 }

packages/message/src/main.js

@@ -10,7 +10,7 @@ var Message = function(options) {
   if (typeof options === 'string') {
     options = {
       message: options
-    }
+    };
   }
   let userOnClose = options.onClose;
   let id = 'message_' + seed++;

packages/select/src/select.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="el-select" :class="{ 'is-multiple': multiple, 'is-small': size === 'small' }">
-    <div class="el-select__tags" v-if="multiple" @click.stop="toggleMenu" ref="tags" :style="{ 'max-width': inputWidth - 36 + 'px' }">
+    <div class="el-select__tags" v-if="multiple" @click.stop="toggleMenu" ref="tags" :style="{ 'max-width': inputWidth - 32 + 'px' }">
       <transition-group @after-leave="resetInputHeight">
         <el-tag
           v-for="item in selected"
@@ -45,14 +45,12 @@
       @mouseenter.native="inputHovering = true"
       @mouseleave.native="inputHovering = false"
       :icon="iconClass"
-      :style="{ 'width': inputWidth + 'px' }"
       v-element-clickoutside="handleClose">
     </el-input>
     <transition name="md-fade-bottom">
       <el-select-menu
         ref="popper"
-        v-show="visible && nodataText !== false"
-        :style="{ 'width': dropdownWidth ? dropdownWidth + 'px' : '100%' }">
+        v-show="visible && nodataText !== false">
         <ul class="el-select-dropdown__list" v-show="options.length > 0 && filteredOptionsCount > 0 && !loading">
           <slot></slot>
         </ul>
@@ -119,14 +117,6 @@
           }
         }
         return null;
-      },
-
-      inputWidth() {
-        if (!this.width) {
-          return this.multiple ? 220 : 180;
-        }
-
-        return this.width;
       }
     },
 
@@ -142,8 +132,6 @@
 
     props: {
       name: String,
-      width: Number,
-      dropdownWidth: Number,
       value: {},
       size: String,
       disabled: Boolean,
@@ -166,6 +154,7 @@
         selected: {},
         isSelect: true,
         inputLength: 20,
+        inputWidth: 180,
         valueChangeBySelected: false,
         cachedPlaceHolder: '',
         optionsCount: 0,
@@ -528,6 +517,14 @@
       this.$on('addOptionToValue', this.addOptionToValue);
       this.$on('handleOptionClick', this.handleOptionSelect);
       this.$on('onOptionDestroy', this.onOptionDestroy);
+    },
+
+    mounted() {
+      this.$nextTick(() => {
+        if (this.$refs.reference.$el) {
+          this.inputWidth = this.$refs.reference.$el.getBoundingClientRect().width;
+        }
+      });
     }
   };
 </script>

packages/table/src/table.vue

@@ -361,7 +361,7 @@
       selection(val) {
         this.$emit('selectionchange', val);
         if (this.selectionMode === 'multiple') {
-          this.allSelected = val.length === this.tableData.length;
+          this.allSelected = this.tableData.length > 0 && val.length === this.tableData.length;
         }
       },
 

packages/theme-default/src/select.css

@@ -47,6 +47,7 @@
     }
 
     & .el-input {
+      width: 180px;
       display: inline-block;
 
       & .el-input__icon {

packages/theme-default/src/switch.css

@@ -72,7 +72,7 @@
         border-radius: 15px;
         transition: transform .3s;
         size: 16px;
-        z-index: 100;
+        z-index: 20;
         background-color: var(--color-white);
       }
     }