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