Skip to content

E
Element
Commit ac8bc3a8 authored by baiyaaaaa's avatar baiyaaaaa Committed by GitHub
Browse files
Options

Merge pull request #115 from Leopoldthecoder/next 

DatePicker/DatetimePicker doc update
parents c61c1472 eb031548
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 448 additions and 736 deletions
examples/docs/alert.md
View file @ ac8bc3a8
......@@ -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
View file @ ac8bc3a8
......@@ -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
View file @ ac8bc3a8
This diff is collapsed.
examples/docs/dialog.md
View file @ ac8bc3a8
......@@ -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
View file @ ac8bc3a8
<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
View file @ ac8bc3a8
......@@ -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
View file @ ac8bc3a8
......@@ -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
View file @ ac8bc3a8
......@@ -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
View file @ ac8bc3a8
......@@ -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
View file @ ac8bc3a8
......@@ -103,7 +103,6 @@
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value | 绑定值，需双向绑定 | string | - | - |
| readonly | 只读 | boolean | - | false |
| placeholder | 占位内容 | string | - | - |
| format | 时间格式化 | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
......
packages/date-picker/src/panel/date-range.vue
View file @ ac8bc3a8
......@@ -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
View file @ ac8bc3a8
......@@ -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
View file @ ac8bc3a8
......@@ -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
View file @ ac8bc3a8
......@@ -12,6 +12,6 @@
"author": "elemefe",
"license": "MIT",
"devDependencies": {
"vue-popup": "^0.2.2"
"vue-popup": "^0.2.3"
}
}
packages/loading/src/directive.js
View file @ ac8bc3a8
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
View file @ ac8bc3a8
......@@ -12,6 +12,6 @@
"author": "elemefe",
"license": "MIT",
"dependencies": {
"vue-popup": "^0.2.2"
"vue-popup": "^0.2.3"
}
}
packages/message/src/main.js
View file @ ac8bc3a8
......@@ -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
View file @ ac8bc3a8
<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
View file @ ac8bc3a8
......@@ -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
View file @ ac8bc3a8
......@@ -47,6 +47,7 @@
}
& .el-input {
width: 180px;
display: inline-block;
& .el-input__icon {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment