github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

DatePicker/DatetimePicker doc update

pull/2/head
Leopoldthecoder 2016-08-29 19:01:42 +08:00
parent 57b33a3e36
commit eb03154839
22 changed files with 457 additions and 745 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/docs/alert.md
View File

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

236
examples/docs/date-picker.md
View File

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

411
examples/docs/datetime-picker.md
View File

@ -72,87 +72,60 @@
}; };
</script> </script>
## 日期和时间点 <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;
}
}
在两个选择器中选择日期与时间。 .demo-datetime-picker .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
<div class="demo-box"> ## 日期时间选择器
在同一个选择器里选择日期和时间
### 日期和时间点
:::demo 通过设置`type`属性为`datetime`，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。
```html
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker <el-date-picker
v-model="value1" v-model="value1"
type="date" type="datetime"
placeholder="选择日期"> placeholder="选择日期时间">
</el-date-picker>
<el-time-picker
v-model="value1"
placeholder="选择时间">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="block">
```html <span class="demonstration">带快捷选项</span>
<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 <el-date-picker
v-model="value2" v-model="value2"
type="datetime" type="datetime"
placeholder="选择日期时间"> 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"> :picker-options="pickerOptions1">
</el-date-picker> </el-date-picker>
<el-time-picker </div>
v-model="value" </template>
placeholder="选择时间">
</el-time-picker>
<script> <script>
module.exports = { export default {
data() { data() {
return { return {
pickerOptions1: { pickerOptions1: {
@ -165,329 +138,101 @@
text: '昨天', text: '昨天',
onClick(picker) { onClick(picker) {
const date = new Date(); const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24); picker.$emit('pick', new Date(date.getTime() - 3600 * 1000 * 24));
picker.$emit('pick', date);
} }
}, { }, {
text: '一周前', text: '一周前',
onClick(picker) { onClick(picker) {
const date = new Date(); const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', new Date(date.getTime() - 3600 * 1000 * 24 * 7));
picker.$emit('pick', date);
} }
}] }]
}, },
value: new Date() value1: '',
value2: ''
}; };
} }
}; };
</script> </script>
``` ```
:::
### 含快捷选项（二） ### 日期和时间范围
左侧区域可配置快捷选项，例如『今天』、『昨天』等。 :::demo 设置`type`为`datetimerange`即可选择日期和时间范围
```html
<div class="demo-box"> <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 <el-date-picker
v-model="value4" v-model="value4"
type="datetime"
placeholder="选择日期时间"
:picker-options="pickerOptions1">
</el-date-picker>
</div>
```html
<el-date-picker
v-model="value"
type="datetime"
placeholder="选择日期时间"
:picker-options="pickerOptions1"
style="width: 300px;">
</el-date-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: ''
};
}
};
</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" type="datetimerange"
:picker-options="pickerOptions2" :picker-options="pickerOptions2"
placeholder="选择时间范围" placeholder="选择时间范围"
style="width:340px"> style="width:340px">
</el-date-picker> </el-date-picker>
</div> </div>
</template>
```html
<el-date-picker
v-model="value"
type="datetimerange"
:picker-options="pickerOptions2"
placeholder="选择时间范围"
style="width:340px">
</el-date-picker>
<script> <script>
module.exports = { export default {
data() { data() {
return { return {
value: '',
pickerOptions2: { pickerOptions2: {
shortcuts: [{ shortcuts: [{
text: '最近一周', text: '最近一周',
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = end.getTime() - 3600 * 1000 * 24 * 7;
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end]);
} }
}, { }, {
text: '最近一个月', text: '最近一个月',
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = end.getTime() - 3600 * 1000 * 24 * 30;
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end]);
} }
}, { }, {
text: '最近三个月', text: '最近三个月',
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = end.getTime() - 3600 * 1000 * 24 * 90;
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end]);
} }
}] }]
} },
value3: '',
value4: ''
}; };
} }
}; };
</script> </script>
``` ```
:::
### 日期范围和时间范围选择 ### Attributes
在两个选择器中分别选择日期范围和时间范围。
<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
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| value | 绑定值，需双向绑定 | String | | | | readonly | 只读 | boolean | - | false |
| format | 时间日期格式化 | String | 年 `yyyy`, 月 `MM`, 日 `dd`, 小时 `HH`, 分 `mm`, 秒 `ss` | 'yyyy-MM-dd' | | placeholder | 占位内容 | string | - | - |
| type | 显示类型 | String | year, month, date, datetime, week | date | | type | 显示类型 | string | year/month/date/datetime/week | date |
| readonly | 只读 | Boolean | | false | | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
| placeholder | 占位内容 | String | | | | shortcuts | 快捷选项列表，配置信息<br>查看下表 | object[] | - | - |
| shortcuts | 快捷选项列表，配置信息查看下表 | Object[] | | |
### Shortcuts
### shortcuts
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| text | 标题 | String | | | | text | 标题文本 | string | - | - |
| onClick | 选中后会调用函数，参数是 vm，设置值通过触发 'pick' 事件。例如 vm.$emit('pick', new Date()) | Function | | | | onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置<br>选择器的值。例如 vm.$emit('pick', new Date()) | function | | |

24
examples/docs/dialog.md
View File

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

99
examples/docs/loading.md
View File

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

40
examples/docs/message-box.md
View File

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

30
examples/docs/rate.md
View File

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

4
examples/docs/select.md
View File

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

4
examples/docs/slider.md
View File

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

1
examples/docs/time-picker.md
View File

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

2
package.json
View File

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

20
packages/date-picker/src/panel/date-range.vue
View File

@ -400,8 +400,22 @@
this.rightTimePickerVisible = false; 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) { 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) { if (!first) {
this.leftTimePickerVisible = visible; this.leftTimePickerVisible = visible;
@ -416,8 +430,8 @@
} }
} }
if (this.maxDate) { if (this.maxDate && value) {
this.maxDate = value; this.maxDate = this.setTime(this.maxDate, value);
} }
if (!first) { if (!first) {

11
packages/date-picker/src/panel/date.vue
View File

@ -209,7 +209,16 @@
}, },
handleTimePick(picker, visible, first) { 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) { if (!first) {
this.timePickerVisible = visible; this.timePickerVisible = visible;

12
packages/date-picker/src/panel/time-range.vue
View File

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

2
packages/dialog/package.json
View File

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

92
packages/loading/src/directive.js
View File

@ -1,49 +1,6 @@
import Spinner from './spinner'; import Spinner from './spinner';
exports.install = Vue => { exports.install = Vue => {
let insertDom = (parent, directive, binding) => { let toggleLoading = (el, binding) => {
if (!directive.domVisible) {
Object.keys(directive.maskStyle).forEach(property => {
directive.mask.style[property] = directive.maskStyle[property];
});
Object.keys(directive.spinnerStyle).forEach(property => {
directive.spinner.style[property] = directive.spinnerStyle[property];
});
if (directive.originalPosition !== 'absolute') {
parent.style.position = 'relative';
}
if (binding.modifiers.fullscreen) {
parent.style.overflow = 'hidden';
}
directive.mask.style.display = 'block';
directive.spinner.style.display = 'inline-block';
directive.domVisible = true;
parent.appendChild(directive.mask);
directive.mask.appendChild(directive.spinner);
directive.domInserted = true;
}
};
Vue.directive('loading', {
bind: function(el) {
el.mask = document.createElement('div');
el.mask.className = 'el-loading-mask';
el.maskStyle = {
position: 'absolute',
zIndex: '10000',
backgroundColor: 'rgba(0, 0, 0, .65)',
margin: '0'
};
el.spinner = (new Spinner()).el;
el.spinnerStyle = {
position: 'absolute'
};
},
update: function(el, binding) {
if (binding.value) { if (binding.value) {
Vue.nextTick(() => { Vue.nextTick(() => {
if (binding.modifiers.fullscreen) { if (binding.modifiers.fullscreen) {
@ -97,6 +54,53 @@ exports.install = Vue => {
} }
} }
} }
};
let insertDom = (parent, directive, binding) => {
if (!directive.domVisible) {
Object.keys(directive.maskStyle).forEach(property => {
directive.mask.style[property] = directive.maskStyle[property];
});
Object.keys(directive.spinnerStyle).forEach(property => {
directive.spinner.style[property] = directive.spinnerStyle[property];
});
if (directive.originalPosition !== 'absolute') {
parent.style.position = 'relative';
}
if (binding.modifiers.fullscreen) {
parent.style.overflow = 'hidden';
}
directive.mask.style.display = 'block';
directive.spinner.style.display = 'inline-block';
directive.domVisible = true;
parent.appendChild(directive.mask);
directive.mask.appendChild(directive.spinner);
directive.domInserted = true;
}
};
Vue.directive('loading', {
bind: function(el, binding) {
el.mask = document.createElement('div');
el.mask.className = 'el-loading-mask';
el.maskStyle = {
position: 'absolute',
zIndex: '10000',
backgroundColor: 'rgba(0, 0, 0, .65)',
margin: '0'
};
el.spinner = (new Spinner()).el;
el.spinnerStyle = {
position: 'absolute'
};
toggleLoading(el, binding);
},
update: function(el, binding) {
toggleLoading(el, binding);
}, },
unbind: function(el, binding) { unbind: function(el, binding) {

2
packages/message-box/package.json
View File

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

2
packages/message/src/main.js
View File

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

25
packages/select/src/select.vue
View File

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

2
packages/table/src/table.vue
View File

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

1
packages/theme-default/src/select.css
View File

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

2
packages/theme-default/src/switch.css
View File

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