mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 03:07:36 +08:00
Merge pull request #115 from Leopoldthecoder/next
DatePicker/DatetimePicker doc update
This commit is contained in:
baiyaaaaa
GitHub
commit
ac8bc3a874
@ -172,7 +172,7 @@
|
||||
| description | 辅助性文字 | string | — | — |
|
||||
| closable | 是否可关闭 | boolean | — | true |
|
||||
| close-text | 关闭按钮自定义文本 | string | — | — |
|
||||
| showIcon | 是否显示图标 | boolean | — | false |
|
||||
| show-icon | 是否显示图标 | boolean | — | false |
|
||||
|
||||
|
||||
### Events
|
||||
|
||||
@ -63,227 +63,203 @@
|
||||
};
|
||||
</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 日期选择器
|
||||
|
||||
以『日』为基本单位
|
||||
用于选择或输入日期
|
||||
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="date"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
### 选择日
|
||||
|
||||
以「日」为基本单位，基础的日期选择控件
|
||||
|
||||
:::demo 基本单位由`type`属性指定。快捷选项需配置`picker-options`对象中的`shortcuts`
|
||||
```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>
|
||||
|
||||
```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"
|
||||
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 | | |
|
||||
|
||||
@ -72,87 +72,60 @@
|
||||
};
|
||||
</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">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="date"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
<el-time-picker
|
||||
v-model="value1"
|
||||
placeholder="选择时间">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
### 日期和时间点
|
||||
|
||||
:::demo 通过设置`type`属性为`datetime`，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。
|
||||
```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>
|
||||
<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: {
|
||||
@ -165,329 +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: new Date()
|
||||
value1: '',
|
||||
value2: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 含快捷选项（二）
|
||||
|
||||
左侧区域可配置快捷选项，例如『今天』、『昨天』等。
|
||||
|
||||
<div class="demo-box">
|
||||
<el-date-picker
|
||||
v-model="value4"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
:picker-options="pickerOptions1">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
### 日期和时间范围
|
||||
|
||||
:::demo 设置`type`为`datetimerange`即可选择日期和时间范围
|
||||
```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="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 {
|
||||
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"
|
||||
:picker-options="pickerOptions2"
|
||||
placeholder="选择时间范围"
|
||||
style="width:340px">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<el-date-picker
|
||||
v-model="value"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions2"
|
||||
placeholder="选择时间范围"
|
||||
style="width:340px">
|
||||
</el-date-picker>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
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 | | |
|
||||
|
||||
|
||||
|
||||
@ -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 | 说明 |
|
||||
|
||||
@ -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 遮罩会插入到绑定元素的子节点。
|
||||
在表格等容器中加载数据时显示
|
||||
|
||||
```html
|
||||
<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 上）
|
||||
:::demo 在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加 `body` 修饰符，可以使遮罩插入至 DOM 中的 body 上。
|
||||
|
||||
```html
|
||||
<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
|
||||
: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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 | - | 输入的数据不合法! |
|
||||
|
||||
@ -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
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
||||
@ -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 |
|
||||
|
||||
@ -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
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
||||
@ -103,7 +103,6 @@
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value | 绑定值，需双向绑定 | string | - | - |
|
||||
| readonly | 只读 | boolean | - | false |
|
||||
| placeholder | 占位内容 | string | - | - |
|
||||
| format | 时间格式化 | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
};
|
||||
|
||||
@ -12,6 +12,6 @@
|
||||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"vue-popup": "^0.2.2"
|
||||
"vue-popup": "^0.2.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -12,6 +12,6 @@
|
||||
"author": "elemefe",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vue-popup": "^0.2.2"
|
||||
"vue-popup": "^0.2.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ var Message = function(options) {
|
||||
if (typeof options === 'string') {
|
||||
options = {
|
||||
message: options
|
||||
}
|
||||
};
|
||||
}
|
||||
let userOnClose = options.onClose;
|
||||
let id = 'message_' + seed++;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -47,6 +47,7 @@
|
||||
}
|
||||
|
||||
& .el-input {
|
||||
width: 180px;
|
||||
display: inline-block;
|
||||
|
||||
& .el-input__icon {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user