Skip to content

E
Element
Commit 07a0943d authored by Leopoldthecoder's avatar Leopoldthecoder
Browse files
Options

update message box prompt style

parent f6dd3cf7
Hide whitespace changes
Inline Side-by-side
Showing with 238 additions and 251 deletions
examples/docs/badge.md
View file @ 07a0943d
...@@ -96,6 +96,6 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示 ...@@ -96,6 +96,6 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| value | 显示值 | string, number | | | | value | 显示值 | string, number | — | — |
| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | | | | max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | — | — |
| is-dot | 小圆点 | boolean | | false | | is-dot | 小圆点 | boolean | — | false |
examples/docs/breadcrumb.md
View file @ 07a0943d
...@@ -20,4 +20,4 @@ Breadcrumb，面包屑导航，用于提供给用户一个回溯到首页的路 ...@@ -20,4 +20,4 @@ Breadcrumb，面包屑导航，用于提供给用户一个回溯到首页的路
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | 分隔符 | string | | 斜杠'/' | | separator | 分隔符 | string | — | 斜杠'/' |
examples/docs/button.md
View file @ 07a0943d
...@@ -133,9 +133,9 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景 ...@@ -133,9 +133,9 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| size | 尺寸 | string | large,small,mini | | | size | 尺寸 | string | large,small,mini | — |
| type | 类型 | string | primary,success,warning,danger,info,text | | | type | 类型 | string | primary,success,warning,danger,info,text | — |
| plain | 是否朴素按钮 | Boolean | true,false | false | | plain | 是否朴素按钮 | Boolean | true,false | false |
| disabled | 禁用 | boolean | true, false | false | | disabled | 禁用 | boolean | true, false | false |
| icon | 图标，已有的图标库中的图标名 | string | | | | icon | 图标，已有的图标库中的图标名 | string | — | — |
| native-type | 原生 type 属性 | string | button,submit,reset | button | | native-type | 原生 type 属性 | string | button,submit,reset | button |
examples/docs/card.md
View file @ 07a0943d
...@@ -105,5 +105,5 @@ ...@@ -105,5 +105,5 @@
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| | | | header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| — | — |
| body-style | 设置 body 的样式| object| | { padding: '20px' } | | body-style | 设置 body 的样式| object| — | { padding: '20px' } |
examples/docs/checkbox.md
View file @ 07a0943d
...@@ -109,10 +109,10 @@ ...@@ -109,10 +109,10 @@
### Checkbox Attributes ### Checkbox Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| label | 选中状态的值（只有在`checkbox-group`下有意义） | string | | | | label | 选中状态的值（只有在`checkbox-group`下有意义） | string | — | — |
| true-label | 选中时的值 | string, number | | | | true-label | 选中时的值 | string, number | — | — |
| false-label | 没有选中时的值 | string, number | | | | false-label | 没有选中时的值 | string, number | — | — |
| disabled | 按钮禁用 | boolean | | false | | disabled | 按钮禁用 | boolean | — | false |
### Checkbox-group Events ### Checkbox-group Events
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
......
examples/docs/date-picker.md
View file @ 07a0943d
...@@ -252,14 +252,14 @@ ...@@ -252,14 +252,14 @@
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| 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`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
| shortcuts | 快捷选项列表，配置信息<br>查看下表 | object[] | - | - | | shortcuts | 快捷选项列表，配置信息<br>查看下表 | object[] | — | — |
### Shortcuts ### Shortcuts
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| text | 标题文本 | string | - | - | | text | 标题文本 | string | — | — |
| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置<br>选择器的值。例如 vm.$emit('pick', new Date()) | function | | | | onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置<br>选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
examples/docs/datetime-picker.md
View file @ 07a0943d
...@@ -223,16 +223,16 @@ ...@@ -223,16 +223,16 @@
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| 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`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
| shortcuts | 快捷选项列表，配置信息<br>查看下表 | object[] | - | - | | shortcuts | 快捷选项列表，配置信息<br>查看下表 | object[] | — | — |
### Shortcuts ### Shortcuts
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| text | 标题文本 | string | - | - | | text | 标题文本 | string | — | — |
| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置<br>选择器的值。例如 vm.$emit('pick', new Date()) | function | | | | onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置<br>选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
examples/docs/dialog.md
View file @ 07a0943d
...@@ -182,17 +182,17 @@ Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单 ...@@ -182,17 +182,17 @@ 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 |
| custom-class | Dialog 的自定义类名 | string | - | - | | custom-class | Dialog 的自定义类名 | string | — | — |
| close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean | - | true | | close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean | — | true |
| close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean | - | true | | close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean | — | true |
### Slot ### Slot
| name | 说明 | | name | 说明 |
|------|--------| |------|--------|
| - | Dialog 的内容 | | — | Dialog 的内容 |
| footer | Dialog 按钮操作区的内容 | | footer | Dialog 按钮操作区的内容 |
### 方法 ### 方法
......
examples/docs/dropdown.md
View file @ 07a0943d
...@@ -122,9 +122,9 @@ ...@@ -122,9 +122,9 @@
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| text | 菜单按钮文本 | string | | | | text | 菜单按钮文本 | string | — | — |
| type | 菜单按钮类型，同 Button 组件 | string | | | | type | 菜单按钮类型，同 Button 组件 | string | — | — |
| trigger | 触发下拉菜单的方式 | string | hover,click | hover | | trigger | 触发下拉菜单的方式 | string | hover,click | hover |
| icon-separate | 独立的下拉菜单按钮 | boolean | | false | | icon-separate | 独立的下拉菜单按钮 | boolean | — | false |
| size | 菜单按钮尺寸，同 Button 组件 | string | large, small, mini | | | size | 菜单按钮尺寸，同 Button 组件 | string | large, small, mini | — |
| menu-align | 菜单水平对齐方向 | string | start, end | end | | menu-align | 菜单水平对齐方向 | string | start, end | end |
examples/docs/layout.md
View file @ 07a0943d
...@@ -163,7 +163,7 @@ ...@@ -163,7 +163,7 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| gutter | 栅格间隔 | number | — | 0 | | gutter | 栅格间隔 | number | — | 0 |
| type | 布局模式，可选 flex，现代浏览器下有效 | string | - | - | | type | 布局模式，可选 flex，现代浏览器下有效 | string | — | — |
| justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start | | justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top | | align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top |
...@@ -171,6 +171,6 @@ ...@@ -171,6 +171,6 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| **span** | 栅格占据的列数，**必选参数** | number | — | — | | **span** | 栅格占据的列数，**必选参数** | number | — | — |
| offset | 栅格左侧的间隔格数 | number | - | 0 | | offset | 栅格左侧的间隔格数 | number | — | 0 |
| push | 栅格向右移动格数 | number | - | 0 | | push | 栅格向右移动格数 | number | — | 0 |
| pull | 栅格向左移动格数 | number | - | 0 | | pull | 栅格向左移动格数 | number | — | 0 |
examples/docs/message-box.md
View file @ 07a0943d
...@@ -2,42 +2,38 @@ ...@@ -2,42 +2,38 @@
export default { export default {
methods: { methods: {
open() { open() {
this.$alert('这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容', '消息');
},
open2() {
this.$alert('操作失败, 请稍后重试', '提示', { this.$alert('操作失败, 请稍后重试', '提示', {
type: 'error' type: 'error'
}); });
}, },
open3() { open2() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$notify({ this.$message({
message: '删除成功!', message: '删除成功!',
type: 'success' type: 'success'
}); });
}).catch(() => { }).catch(() => {
this.$notify({ this.$message({
message: '已取消删除', message: '已取消删除',
type: 'info' type: 'info'
}); });
}); });
}, },
open4() { open3() {
this.$prompt('请输入邮箱', '提示', { this.$prompt('请输入邮箱', '提示', {
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/, inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: '邮箱格式不正确' inputErrorMessage: '邮箱格式不正确'
}).then(({ value }) => { }).then(({ value }) => {
this.$notify({ this.$message({
type: 'success', type: 'success',
message: '你的邮箱是: ' + value message: '你的邮箱是: ' + value
}); });
}).catch(() => { }).catch(() => {
this.$notify({ this.$message({
type: 'info', type: 'info',
message: '取消输入' message: '取消输入'
}); });
...@@ -45,13 +41,13 @@ ...@@ -45,13 +41,13 @@
}, },
open5() { open4() {
this.$msgbox({ this.$msgbox({
title: '消息', title: '消息',
message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容', message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
showCancelButton: true showCancelButton: true
}).then(action => { }).then(action => {
this.$notify({ this.$message({
type: 'info', type: 'info',
message: 'action: ' + action message: 'action: ' + action
}); });
...@@ -64,24 +60,21 @@ ...@@ -64,24 +60,21 @@
## Message box 信息提示 ## Message box 信息提示
模拟系统的消息提示框而实现的一套摸态对话框组件，用于消息提示、成功提示、错误提示、询问信息 模拟系统的消息提示框而实现的一套摸态对话框组件，用于消息提示、成功提示、错误提示、询问信息
### 基础用法 ### 消息提示
MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert`等功能：`$msgbox`，`$alert`，`$confirm`以及`$prompt`。
在本页文档中一一介绍它们，首先看最简单的示例，我们使用`$alert`。
:::demo 它接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它会返回一个`Promise`对象便于进行后续操作的处理。 当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭
:::demo 调用`$alert`方法即可打开消息提示，它模拟了系统的 `alert`，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它会返回一个`Promise`对象便于进行后续操作的处理。
```html ```html
<template> <template>
<el-button type="text" @click.native="open">打开 Alert</el-button> <el-button type="text" @click.native="open">点击打开 Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open() { open() {
this.$alert('这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容', '消息'); this.$alert('操作失败, 请稍后重试', '提示');
} }
} }
} }
...@@ -89,87 +82,66 @@ MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert ...@@ -89,87 +82,66 @@ MessageBox 组件提供了四种不同的样式来替代浏览器提供的`alert
``` ```
::: :::
### 配置项 ### 确认消息
MessageBox 组件也拥有极高的定制性，我们可以传入`options`作为第三个参数，它是一个字面量对象。 提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框
:::demo 第二个参数`title`必须定义为`String`类型，如果是`Object`，会被理解为`options`。`type`字段表明消息类型，可以为`success`，`error`，`info`和`warning`，无效的设置将会被忽略。 :::demo 调用`$confirm`方法即可打开消息提示，它模拟了系统的 `confirm`。Message Box 组件也拥有极高的定制性，我们可以传入`options`作为第三个参数，它是一个字面量对象。`type`字段表明消息类型，可以为`success`，`error`，`info`和`warning`，无效的设置将会被忽略。注意，第二个参数`title`必须定义为`String`类型，如果是`Object`，会被理解为`options`。在这里我们用了 Promise 来处理后续响应。
```html ```html
<template> <template>
<el-button type="text" @click.native="open2">打开 alert</el-button> <el-button type="text" @click.native="open2">点击打开 Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open2() { open2() {
this.$alert('操作失败, 请稍后重试', '提示', {
type: 'error'
});
},
}
}
</script>
```
:::
下面是一个 confirm 框。
:::demo 在这里我们用了`Promise`来处理后续响应。
```html
<template>
<el-button type="text" @click.native="open3">打开 confirm</el-button>
</template>
<script>
export default {
methods: {
open3() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$notify({ this.$message({
type: 'success', type: 'success',
message: '删除成功!' message: '删除成功!'
}); });
}).catch(() => { }).catch(() => {
this.$notify({ this.$message({
type: 'info', type: 'info',
message: '已取消删除' message: '已取消删除'
}); });
}); });
}, }
} }
} }
</script> </script>
``` ```
::: :::
Prompt 框功能强大，可以处理简单的输入。 ### 提交内容
当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框
:::demo 可以用`inputPattern`字段自己规定匹配模式，或者用`inputValidator`规定校验函数，可以返回`Boolean`或`String`，`Boolean`为`false`或字符串时均表示校验为通过，`String`相当于定义了`inputErrorMessage`字段。此外，可以用`inputPlaceholder`字段来定义输入框的占位符。 :::demo 调用`$prompt`方法即可打开消息提示，它模拟了系统的 `prompt`。可以用`inputPattern`字段自己规定匹配模式，或者用`inputValidator`规定校验函数，可以返回`Boolean`或`String`，`Boolean`为`false`或字符串时均表示校验未通过，`String`相当于定义了`inputErrorMessage`字段。此外，可以用`inputPlaceholder`字段来定义输入框的占位符。
```html ```html
<template> <template>
<el-button type="text" @click.native="open4">打开 prompt</el-button> <el-button type="text" @click.native="open3">点击打开 Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open4() { open3() {
this.$prompt('请输入邮箱', '提示', { this.$prompt('请输入邮箱', '提示', {
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/, inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: '邮箱格式不正确' inputErrorMessage: '邮箱格式不正确'
}).then(value => { }).then(value => {
this.$notify({ this.$message({
type: 'success', type: 'success',
message: '你的邮箱是: ' + value message: '你的邮箱是: ' + value
}); });
}).catch(() => { }).catch(() => {
this.$notify({ this.$message({
type: 'info', type: 'info',
message: '取消输入' message: '取消输入'
}); });
...@@ -181,25 +153,27 @@ Prompt 框功能强大，可以处理简单的输入。 ...@@ -181,25 +153,27 @@ Prompt 框功能强大，可以处理简单的输入。
``` ```
::: :::
Msgbox 框是最基本的弹框，与 Alert 的区别在于 Alert 无法通过 ESC 和 点击框外关闭。 ### 自定义
:::demo 使用了`showCancelButton`字段，用于显示取消按钮，同时使用`cancelButtonClass`可以自定义样式，`cancelButtonText`来自定义按钮文本，Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表。 可自定义配置不同内容
:::demo 以上三个方法都是对`$msgbox`方法的再包装。本例直接调用`$msgbox`方法，使用了`showCancelButton`字段，用于显示取消按钮。另外可使用`cancelButtonClass`为其添加自定义样式，使用`cancelButtonText`来自定义按钮文本。Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表。
```html ```html
<template> <template>
<el-button type="text" @click.native="open5">打开 Message Box</el-button> <el-button type="text" @click.native="open4">点击打开 Message Box</el-button>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
open5() { open4() {
this.$msgbox({ this.$msgbox({
title: '消息', title: '消息',
message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容', message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
showCancelButton: true showCancelButton: true
}).then(action => { }).then(action => {
this.$notify({ this.$message({
type: 'info', type: 'info',
message: 'action: ' + action message: 'action: ' + action
}); });
...@@ -229,17 +203,17 @@ import { MessageBox } from 'element-ui'; ...@@ -229,17 +203,17 @@ import { MessageBox } from 'element-ui';
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| title | MessageBox标题 | string | - | - | | title | MessageBox标题 | string | — | — |
| message | MessageBox消息正文内容 | string | - | - | | message | MessageBox消息正文内容 | string | — | — |
| type | 消息类型，用于显示图标 | string | success/info/<br>warning/error | - | | type | 消息类型，用于显示图标 | string | success/info/<br>warning/error | — |
| show-cancel-button | 是否显示取消按钮 | boolean | - | false（以 confirm 和 prompt 方式调用时为 true） | | showCancelButton | 是否显示取消按钮 | boolean | — | false（以 confirm 和 prompt 方式调用时为 true） |
| show-confirm-button | 是否显示确定按钮 | boolean | - | true | | showConfirmButton | 是否显示确定按钮 | boolean | — | true |
| cancel-button-text | 取消按钮的文本内容 | string | - | 取消 | | cancelButtonText | 取消按钮的文本内容 | string | — | 取消 |
| confirm-button-text | 确定按钮的文本内容 | string | - | 确定 | | confirmButtonText | 确定按钮的文本内容 | string | — | 确定 |
| cancel-button-class | 取消按钮的自定义类名 | string | - | - | | cancelButtonClass | 取消按钮的自定义类名 | string | — | — |
| confirm-button-class | 确定按钮的自定义类名 | string | - | - | | confirmButtonClass | 确定按钮的自定义类名 | string | — | — |
| show-input | 是否显示输入框 | boolean | - | false（以 prompt 方式调用时为 true）| | showInput | 是否显示输入框 | boolean | — | false（以 prompt 方式调用时为 true）|
| input-placeholder | 输入框的占位符 | string | - | - | | inputPlaceholder | 输入框的占位符 | string | — | — |
| input-pattern | 输入框的校验表达式 | regexp | - | - | | inputPattern | 输入框的校验表达式 | regexp | — | — |
| input-validator | 输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | - | - | | inputValidator | 输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | — | — |
| input-error-message | 校验未通过时的提示文本 | string | - | 输入的数据不合法! | | inputErrorMessage | 校验未通过时的提示文本 | string | — | 输入的数据不合法! |
examples/docs/message.md
View file @ 07a0943d
...@@ -203,8 +203,8 @@ import { Message } from 'element-ui'; ...@@ -203,8 +203,8 @@ import { Message } from 'element-ui';
## Options ## Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| message | 消息文字 | string | - | - | | message | 消息文字 | string | — | — |
| type | 主题 | string | success/warning/info/error | info | | type | 主题 | string | success/warning/info/error | info |
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | - | 3000 | | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 |
| showClose | 是否显示关闭按钮 | boolean | - | false | | showClose | 是否显示关闭按钮 | boolean | — | false |
| onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | - | - | | onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |
examples/docs/notification.md
View file @ 07a0943d
...@@ -195,8 +195,8 @@ import { Notification } from 'element-ui'; ...@@ -195,8 +195,8 @@ import { Notification } from 'element-ui';
### Options ### Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| title | 标题 | string | - | - | | title | 标题 | string | — | — |
| message | 说明文字 | string | - | - | | message | 说明文字 | string | — | — |
| type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | - | | type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | — |
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | - | 4500 | | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
| onClose | 关闭时的回调函数 | function | - | - | | onClose | 关闭时的回调函数 | function | — | — |
examples/docs/pagination.md
View file @ 07a0943d
...@@ -74,12 +74,12 @@ ...@@ -74,12 +74,12 @@
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------| |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| small | 是否使用小型分页样式 | Boolean | | false | | small | 是否使用小型分页样式 | Boolean | — | false |
| page-size | 每页显示条目个数 | Number | | 10 | | page-size | 每页显示条目个数 | Number | — | 10 |
| total | 总条目数 | Number | | 0 | | total | 总条目数 | Number | — | 0 |
| current-page | 当前页数 | Number | | 0| | current-page | 当前页数 | Number | — | 0|
| layout | 组件布局，子组件名用逗号分隔。| String | `size`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total' | | layout | 组件布局，子组件名用逗号分隔。| String | `size`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total' |
| page-sizes | 每页显示个数选择器的选项设置 | Number[] | | [10, 20, 30, 40, 50, 100] | | page-sizes | 每页显示个数选择器的选项设置 | Number[] | — | [10, 20, 30, 40, 50, 100] |
### Events ### Events
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
......
examples/docs/popover.md
View file @ 07a0943d
...@@ -201,17 +201,17 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的 ...@@ -201,17 +201,17 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------| |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| trigger | 触发方式 | String | 'click', 'focus', 'hover' | click | | trigger | 触发方式 | String | 'click', 'focus', 'hover' | click |
| title | 标题 | String | | | | title | 标题 | String | — | — |
| content | 显示的内容，也可以通过 `slot#` 传入 DOM | String | | | | content | 显示的内容，也可以通过 `slot#` 传入 DOM | String | — | — |
| width | 宽度 | String, Number | | 最小宽度 150px | | width | 宽度 | String, Number | — | 最小宽度 150px |
| placement | 出现位置 | String | `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` | bottom | | placement | 出现位置 | String | `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` | bottom |
| visible | 初始状态是否可见 | Boolean | | false | | visible | 初始状态是否可见 | Boolean | — | false |
| offset | 出现位置的偏移量 | Number | | 0 | | offset | 出现位置的偏移量 | Number | — | 0 |
| transition | 定义渐变动画 | String | | `fade-in-linear` | | transition | 定义渐变动画 | String | — | `fade-in-linear` |
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | | true | | visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` | | options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
### Slot ### Slot
| 参数 | 说明 | | 参数 | 说明 |
|--- | ---| |--- | ---|
| - | Popover内嵌HTML文本 | | — | Popover内嵌HTML文本 |
examples/docs/progress.md
View file @ 07a0943d
...@@ -29,4 +29,4 @@ ...@@ -29,4 +29,4 @@
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| **percentage** | **百分比（必填）** | number | 0-100 | 0 | | **percentage** | **百分比（必填）** | number | 0-100 | 0 |
| type | 进度条样式 | string | blue,green,blue-stripe,green-stripe | blue | | type | 进度条样式 | string | blue,green,blue-stripe,green-stripe | blue |
| size | 进度条尺寸 | string | large, small | | | size | 进度条尺寸 | string | large, small | — |
examples/docs/radio.md
View file @ 07a0943d
...@@ -113,13 +113,13 @@ ...@@ -113,13 +113,13 @@
### Radio Attributes ### Radio Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| label | Radio 的 value | string,number | | | | label | Radio 的 value | string,number | — | — |
| disabled | 是否禁用 | boolean | | false | | disabled | 是否禁用 | boolean | — | false |
### Radio-group Attributes ### Radio-group Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| size | Radio 按钮组尺寸 | string | large, small | | | size | Radio 按钮组尺寸 | string | large, small | — |
### Radio-group Events ### Radio-group Events
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
...@@ -129,5 +129,5 @@ ...@@ -129,5 +129,5 @@
### Radio-button Attributes ### Radio-button Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| label | Radio 的 value | string,number | | | | label | Radio 的 value | string,number | — | — |
| disabled | 是否禁用 | boolean | | false | | disabled | 是否禁用 | boolean | — | false |
examples/docs/rate.md
View file @ 07a0943d
...@@ -89,21 +89,21 @@ ...@@ -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 | 低分和中等分数的界限值，值本身<br>被划分在低分中 | number | - | 2 | | low-threshold | 低分和中等分数的界限值，值本身<br>被划分在低分中 | number | — | 2 |
| high-threshold | 高分和中等分数的界限值，值本身<br>被划分在高分中 | number | - | 4 | | high-threshold | 高分和中等分数的界限值，值本身<br>被划分在高分中 | number | — | 4 |
| colors | icon 的颜色数组，共有 3 个元素，<br>为 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 个元素，<br>为 3 个分段所对应的类名 | array | - | ['el-icon-star-on', 'el-icon-star-on',<br>'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
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
......
examples/docs/select.md
View file @ 07a0943d
...@@ -569,16 +569,16 @@ ...@@ -569,16 +569,16 @@
### Select Attributes ### Select Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| multiple | 是否多选 | boolean | - | false | | multiple | 是否多选 | boolean | — | false |
| disabled | 是否禁用 | boolean | - | false | | disabled | 是否禁用 | boolean | — | false |
| clearable | 单选时是否可以清空选项 | boolean | - | false | | clearable | 单选时是否可以清空选项 | boolean | — | false |
| 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 |
| remote-method | 远程搜索方法 | function | | - | | remote-method | 远程搜索方法 | function | — | — |
| loading | 是否正在从远程获取数据 | boolean | - | false | | loading | 是否正在从远程获取数据 | boolean | — | false |
### Select Events ### Select Events
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
...@@ -588,12 +588,12 @@ ...@@ -588,12 +588,12 @@
### Option Group Attributes ### Option Group Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| label | 分组的组名 | string | - | - | | label | 分组的组名 | string | — | — |
| disabled | 是否将该分组下所有选项置为禁用 | boolean | - | false | | disabled | 是否将该分组下所有选项置为禁用 | boolean | — | false |
### Option Attributes ### Option Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| value | 选项的值 | string/number/object | - | - | | value | 选项的值 | string/number/object | — | — |
| label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | - | - | | label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | — | — |
| disabled | 是否禁用该选项 | boolean | - | false | | disabled | 是否禁用该选项 | boolean | — | false |
examples/docs/slider.md
View file @ 07a0943d
...@@ -140,11 +140,11 @@ ...@@ -140,11 +140,11 @@
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| min | 最小值 | number | - | 0 | | min | 最小值 | number | — | 0 |
| max | 最大值 | number | - | 100 | | max | 最大值 | number | — | 100 |
| step | 步长 | number | - | 1 | | step | 步长 | number | — | 1 |
| show-input | 是否显示输入框 | boolean | - | false | | show-input | 是否显示输入框 | boolean | — | false |
| show-stops | 是否显示间断点 | boolean | - | false | | show-stops | 是否显示间断点 | boolean | — | false |
## Events ## Events
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
......
examples/docs/steps.md
View file @ 07a0943d
...@@ -115,18 +115,18 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。 ...@@ -115,18 +115,18 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| space | 每个 step 的间距，不填写将自适应间距 | Number | | | | space | 每个 step 的间距，不填写将自适应间距 | Number | — | — |
| direction | 显示方向 | string | 'vertical', 'horizontal' | 'horizontal' | | direction | 显示方向 | string | vertical/horizontal | horizontal |
| active | 设置当前激活步骤 | number | | 0 | | active | 设置当前激活步骤 | number | — | 0 |
| process-status | 设置当前步骤的状态 | string | 'wait', 'process', 'finish', 'error', 'success' | 'process' | | process-status | 设置当前步骤的状态 | string | wait/process/finish/error/success | process |
| finish-status | 设置结束步骤的状态 | string | 'wait', 'process', 'finish', 'error', 'success' | 'finish' | | finish-status | 设置结束步骤的状态 | string | wait/process/finish/error/success | finish |
### Step Attributes ### Step Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| title | 标题 | string | | | | title | 标题 | string | — | — |
| description | 描述性文字 | string | | | | description | 描述性文字 | string | — | — |
| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | | | icon | 图标 | Element Icon 提供的图标，如果要使用<br>自定义图标可以通过 slot 方式写入 | string | — |
### Step Slot ### Step Slot
| name | 说明 | | name | 说明 |
......
examples/docs/switch.md
View file @ 07a0943d
...@@ -55,18 +55,18 @@ Switch 组件提供了平滑的开关。 ...@@ -55,18 +55,18 @@ Switch 组件提供了平滑的开关。
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| value | switch 的选中状态 | boolean | | true | | value | switch 的选中状态 | boolean | — | true |
| disabled | 是否禁用 | boolean | | false | | disabled | 是否禁用 | boolean | — | false |
| width | switch 的宽度（像素） | number | | 58（有文字）/ 46（无文字） | | width | switch 的宽度（像素） | number | — | 58（有文字）/ 46（无文字） |
| on-icon-class | switch 打开时所显示图标的类名 | string | | | | on-icon-class | switch 打开时所显示图标的类名 | string | — | — |
| off-icon-class | switch 关闭时所显示图标的类名 | string | | | | off-icon-class | switch 关闭时所显示图标的类名 | string | — | — |
| on-text | switch 打开时的文字 | string | | 'ON' | | on-text | switch 打开时的文字 | string | — | 'ON' |
| off-text | switch 关闭时的文字 | string | | 'OFF' | | off-text | switch 关闭时的文字 | string | — | 'OFF' |
| on-color | switch 打开时的背景色 | string | | | | on-color | switch 打开时的背景色 | string | — | — |
| off-color | switch 关闭时的背景色 | string | | | | off-color | switch 关闭时的背景色 | string | — | — |
| name | switch 对应的 name 属性 | string | | | | name | switch 对应的 name 属性 | string | — | — |
## Events ## Events
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- | |---------- |-------- |---------- |
| change | switch 状态发生变化时的回调函数 | | | change | switch 状态发生变化时的回调函数 | — |
examples/docs/table.md
View file @ 07a0943d
...@@ -598,7 +598,7 @@ ...@@ -598,7 +598,7 @@
选择多行数据时使用 Checkbox 选择多行数据时使用 Checkbox
:::demo 除了`selection-mode`的设置外，多选与单选并没有太大差别，只是传入`selectionchange`事件中的参数从对象变成了对象数组。此外，需要提供一个列来显示多选框: 手动添加一个`el-table-column`，设`type`属性为`selection`即可。在本例中，为了方便说明其他属性，我们还使用了`inline-template`和`show-tooltip-when-overflow`属性，设置了`inline-template`属性后，可以通过调用`row`对象中的值取代`property`属性的设置。而如果设置了宽度，默认情况无法完整显示的内容会被隐藏，可以使用`show-tooltip-when-overflow`属性，它接受一个`Boolean`，为`true`时当 hover 在指定内容上就会显示完整内容。 :::demo 除了`selection-mode`的设置外，多选与单选并没有太大差别，只是传入`selectionchange`事件中的参数从对象变成了对象数组。此外，需要提供一个列来显示多选框: 手动添加一个`el-table-column`，设`type`属性为`selection`即可。在本例中，为了方便说明其他属性，我们还使用了`inline-template`和`show-tooltip-when-overflow`：设置了`inline-template`属性后，可以通过调用`row`对象中的值取代`property`属性的设置；默认情况下若内容过多会折行显示，若需要单行显示可以使用`show-tooltip-when-overflow`属性，它接受一个`Boolean`，为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。
```html ```html
<template> <template>
<el-table <el-table
...@@ -742,13 +742,13 @@ ...@@ -742,13 +742,13 @@
### Table Attributes ### Table Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| data | 显示的数据 | array | - | - | | data | 显示的数据 | array | — | — |
| height | table 的高度，默认高度为空，即自动高度 | string | - | - | | height | table 的高度，默认高度为空，即自动高度 | string | — | — |
| stripe | 是否为斑马纹 table | boolean | - | false | | stripe | 是否为斑马纹 table | boolean | — | false |
| border | 是否带有纵向边框 | boolean | - | false | | border | 是否带有纵向边框 | boolean | — | false |
| selection-mode | 列表项选择模式 | string | single/multiple/none | none | | selection-mode | 列表项选择模式 | string | single/multiple/none | none |
| allow-no-selection | 单选模式是否允许选项为空 | boolean | - | false | | allow-no-selection | 单选模式是否允许选项为空 | boolean | — | false |
| fixed-column-count | 固定列的个数 | number | - | 0 | | fixed-column-count | 固定列的个数 | number | — | 0 |
### Table Events ### Table Events
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
...@@ -761,11 +761,11 @@ ...@@ -761,11 +761,11 @@
### Table-column Attributes ### Table-column Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| label | 显示的标题 | string | - | - | | label | 显示的标题 | string | — | — |
| property | 对应列内容的字段名 | string | - | - | | property | 对应列内容的字段名 | string | — | — |
| width | 对应列的宽度 | string | - | - | | width | 对应列的宽度 | string | — | — |
| sortable | 对应列是否可以排序 | boolean | - | false | | sortable | 对应列是否可以排序 | boolean | — | false |
| type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | - | | type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | — |
| formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | - | - | | formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | — | — |
| show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | - | false | | show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | — | false |
| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，JSX 里通过 _self 获取当前上下文。此时不需要配置 property 属性 | - | - | | inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，JSX 里通过 _self 获取当前上下文。此时不需要配置 property 属性 | — | — |
examples/docs/tabs.md
View file @ 07a0943d
...@@ -115,9 +115,9 @@ ...@@ -115,9 +115,9 @@
### Tabs Attributes ### Tabs Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| type | 风格类型 | string | card, border-card | | | type | 风格类型 | string | card, border-card | — |
| closable | 标签是否可关闭 | boolean | true, false | false | | closable | 标签是否可关闭 | boolean | true, false | false |
| active-name | 选中选项卡的 name | string | | | | active-name | 选中选项卡的 name | string | — | — |
### Tabs Events ### Tabs Events
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
...@@ -128,5 +128,5 @@ ...@@ -128,5 +128,5 @@
### Tab-pane Attributes ### Tab-pane Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| label | 选项卡标题 | string | | | | label | 选项卡标题 | string | — | — |
| name | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | | 该选项卡在选项卡中的 name 值，如第一个选项卡则为'1' | | name | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡中的 name 值，如第一个选项卡则为'1' |
examples/docs/tag.md
View file @ 07a0943d
...@@ -100,13 +100,13 @@ Tag 组件提供了六种主题。 ...@@ -100,13 +100,13 @@ Tag 组件提供了六种主题。
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| type | 主题 | string | 'primary', 'gray', 'success', 'warning', 'error' | | | type | 主题 | string | 'primary', 'gray', 'success', 'warning', 'error' | — |
| closable | 是否可关闭 | boolean | | false | | closable | 是否可关闭 | boolean | — | false |
| close-transition | 是否禁用关闭时的渐变动画 | boolean | | false | | close-transition | 是否禁用关闭时的渐变动画 | boolean | — | false |
| hit | 是否有边框描边 | boolean | | false | | hit | 是否有边框描边 | boolean | — | false |
### Events ### Events
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- | |---------- |-------- |---------- |
| close | 关闭tag时触发的事件 | | | close | 关闭tag时触发的事件 | — |
examples/docs/time-picker.md
View file @ 07a0943d
...@@ -103,21 +103,21 @@ ...@@ -103,21 +103,21 @@
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| 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' |
| picker-options | 当前时间日期选择器特有的选项，参考下表 | object | - | {} | | picker-options | 当前时间日期选择器特有的选项，参考下表 | object | — | {} |
### Time Select Options ### Time Select Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| start | 开始时间 | string | - | 09:00 | | start | 开始时间 | string | — | 09:00 |
| end | 结束时间 | string | - | 18:00 | | end | 结束时间 | string | — | 18:00 |
| step | 间隔时间 | string | - | 00:30 | | step | 间隔时间 | string | — | 00:30 |
| minTime | 最小时间，小于该时间的时间段将被禁用 | string | - | 00:00 | | minTime | 最小时间，小于该时间的时间段将被禁用 | string | — | 00:00 |
### Time Picker Options ### Time Picker Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| selectableRange | 可选时间段，例如<br>`'18:30:00 - 20:30:00'`<br>或者传入数组<br>`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | - | - | | selectableRange | 可选时间段，例如<br>`'18:30:00 - 20:30:00'`<br>或者传入数组<br>`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
examples/docs/tooltip.md
View file @ 07a0943d
...@@ -165,12 +165,12 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。 ...@@ -165,12 +165,12 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------| |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| effect | 默认提供的主题 | String | `dark`, `light` | dark | | effect | 默认提供的主题 | String | `dark`, `light` | dark |
| content | 显示的内容，也可以通过 `slot#content` 传入 DOM | String | | | | content | 显示的内容，也可以通过 `slot#content` 传入 DOM | String | — | — |
| placement | Tooltip 的出现位置 | String | `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` | bottom | | placement | Tooltip 的出现位置 | String | `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` | bottom |
| visible | 初始状态是否可见 | Boolean | | false | | visible | 初始状态是否可见 | Boolean | — | false |
| disabled | Tooltip 是否可用 | Boolean | | false | | disabled | Tooltip 是否可用 | Boolean | — | false |
| offset | 出现位置的偏移量 | Number | | 0 | | offset | 出现位置的偏移量 | Number | — | 0 |
| transition | 定义渐变动画 | String | | `fade-in-linear` | | transition | 定义渐变动画 | String | — | `fade-in-linear` |
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | | true | | visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` | | options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| openDelay | 延迟出现，单位毫秒 | Number | | 0 | | openDelay | 延迟出现，单位毫秒 | Number | — | 0 |
examples/docs/upload.md
View file @ 07a0943d
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| action | 必选参数, 上传的地址 | string | - | — | | action | 必选参数, 上传的地址 | string | — | — |
| headers | 可选参数, 设置上传的请求头部 | object | — | — | | headers | 可选参数, 设置上传的请求头部 | object | — | — |
| multiple | 可选参数, 是否支持多选文件 | boolean | — | — | | multiple | 可选参数, 是否支持多选文件 | boolean | — | — |
| file | 可选参数, 上传的文件字段名 | string | — | file | | file | 可选参数, 上传的文件字段名 | string | — | file |
......
packages/message-box/src/main.js
View file @ 07a0943d
...@@ -161,6 +161,7 @@ MessageBox.alert = function(message, title, options) { ...@@ -161,6 +161,7 @@ MessageBox.alert = function(message, title, options) {
title: title, title: title,
message: message, message: message,
$type: 'alert', $type: 'alert',
closeOnPressEscape: false,
closeOnClickModal: false closeOnClickModal: false
}, options)); }, options));
}; };
......
packages/message-box/src/main.vue
View file @ 07a0943d
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<div class="el-message-box__status" :class="[ typeClass ]"></div> <div class="el-message-box__status" :class="[ typeClass ]"></div>
<div class="el-message-box__message" :style="{ 'margin-left': typeClass ? '50px' : '0' }"><p>{{ message }}</p></div> <div class="el-message-box__message" :style="{ 'margin-left': typeClass ? '50px' : '0' }"><p>{{ message }}</p></div>
<div class="el-message-box__input" v-show="showInput"> <div class="el-message-box__input" v-show="showInput">
<input type="text" v-model="inputValue" :placeholder="inputPlaceholder" ref="input" /> <el-input v-model="inputValue" :placeholder="inputPlaceholder" ref="input"></el-input>
<div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{ editorErrorMessage }}</div> <div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{ editorErrorMessage }}</div>
</div> </div>
</div> </div>
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
}; };
import Popup from 'vue-popup'; import Popup from 'vue-popup';
import ElInput from 'packages/input/index.js';
export default { export default {
mixins: [ Popup ], mixins: [ Popup ],
...@@ -54,6 +55,10 @@ ...@@ -54,6 +55,10 @@
} }
}, },
components: {
ElInput
},
computed: { computed: {
typeClass() { typeClass() {
return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : ''; return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : '';
...@@ -98,6 +103,7 @@ ...@@ -98,6 +103,7 @@
var inputPattern = this.inputPattern; var inputPattern = this.inputPattern;
if (inputPattern && !inputPattern.test(this.inputValue || '')) { if (inputPattern && !inputPattern.test(this.inputValue || '')) {
this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!'; this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
this.$refs.input.$el.querySelector('input').classList.add('invalid');
return false; return false;
} }
var inputValidator = this.inputValidator; var inputValidator = this.inputValidator;
...@@ -105,6 +111,7 @@ ...@@ -105,6 +111,7 @@
var validateResult = inputValidator(this.inputValue); var validateResult = inputValidator(this.inputValue);
if (validateResult === false) { if (validateResult === false) {
this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!'; this.editorErrorMessage = this.inputErrorMessage || '输入的数据不合法!';
this.$refs.input.$el.querySelector('input').classList.add('invalid');
return false; return false;
} }
if (typeof validateResult === 'string') { if (typeof validateResult === 'string') {
...@@ -114,6 +121,7 @@ ...@@ -114,6 +121,7 @@
} }
} }
this.editorErrorMessage = ''; this.editorErrorMessage = '';
this.$refs.input.$el.querySelector('input').classList.remove('invalid');
return true; return true;
} }
}, },
...@@ -128,8 +136,8 @@ ...@@ -128,8 +136,8 @@
value(val) { value(val) {
if (val && this.$type === 'prompt') { if (val && this.$type === 'prompt') {
setTimeout(() => { setTimeout(() => {
if (this.$refs.input) { if (this.$refs.input && this.$refs.input.$el) {
this.$refs.input.focus(); this.$refs.input.$el.querySelector('input').focus();
} }
}, 500); }, 500);
} }
......
packages/table/src/table-body.js
View file @ 07a0943d
...@@ -51,6 +51,7 @@ export default { ...@@ -51,6 +51,7 @@ export default {
{ {
this._l(this.columns, (column) => this._l(this.columns, (column) =>
<td <td
style={{ 'white-space': column.showTooltipWhenOverflow ? 'nowrap' : 'normal' }}
class={ column.id } class={ column.id }
on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) } on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
on-mouseleave={ this.handleCellMouseLeave }> on-mouseleave={ this.handleCellMouseLeave }>
......
packages/table/src/table-column.js
View file @ 07a0943d
...@@ -83,7 +83,10 @@ export default { ...@@ -83,7 +83,10 @@ export default {
type: Boolean, type: Boolean,
default: true default: true
}, },
showTooltipWhenOverflow: Boolean, showTooltipWhenOverflow: {
type: Boolean,
default: false
},
formatter: Function formatter: Function
}, },
...@@ -159,6 +162,7 @@ export default { ...@@ -159,6 +162,7 @@ export default {
realWidth: width || minWidth, realWidth: width || minWidth,
sortable: this.sortable, sortable: this.sortable,
resizable: this.resizable, resizable: this.resizable,
showTooltipWhenOverflow: this.showTooltipWhenOverflow,
formatter: this.formatter formatter: this.formatter
}); });
......
packages/theme-default/src/message-box.css
View file @ 07a0943d
...@@ -39,24 +39,20 @@ ...@@ -39,24 +39,20 @@
} }
@e input { @e input {
& > input { padding-top: 15px;
border: 1px solid #dedede; & input.invalid {
border-radius: 5px; border-color: #ff4949;
padding: 4px 5px; &:focus {
margin-top: 10px; border-color: #ff4949;
width: 100%; }
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
} }
} }
@e errormsg { @e errormsg {
color: red; color: red;
font-size: 12px; font-size: 12px;
min-height: 16px; min-height: 18px;
margin-top: 2px;
} }
@e title { @e title {
......
packages/theme-default/src/table.css
View file @ 07a0943d
...@@ -48,6 +48,10 @@ ...@@ -48,6 +48,10 @@
} }
} }
& th {
white-space: nowrap;
}
& th, td { & th, td {
height: 20px; height: 20px;
max-width: 250px; max-width: 250px;
...@@ -55,7 +59,6 @@ ...@@ -55,7 +59,6 @@
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
border-bottom: 1px solid var(--table-border-color); border-bottom: 1px solid var(--table-border-color);
......
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