mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-03 20:58:09 +08:00
杨奕
GitHub
commit
6c9d2c84de
@ -11,7 +11,7 @@
|
||||
.demo-box.demo-alert .el-alert {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
|
||||
|
||||
.demo-box.demo-alert .el-alert:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
### 基本用法
|
||||
|
||||
页面中的非浮层元素，不会自动消失
|
||||
页面中的非浮层元素，不会自动消失。
|
||||
|
||||
::: demo Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。
|
||||
```html
|
||||
@ -50,7 +50,7 @@
|
||||
|
||||
### 自定义关闭按钮
|
||||
|
||||
自定义关闭按钮为文字或其他符号
|
||||
自定义关闭按钮为文字或其他符号。
|
||||
|
||||
::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。设置`close`事件来设置关闭时的回调。
|
||||
```html
|
||||
@ -86,7 +86,7 @@
|
||||
|
||||
### 带有 icon
|
||||
|
||||
表示某种状态时提升可读性
|
||||
表示某种状态时提升可读性。
|
||||
|
||||
::: demo 通过设置`show-icon`属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。
|
||||
```html
|
||||
@ -117,7 +117,7 @@
|
||||
|
||||
### 带有辅助性文字介绍
|
||||
|
||||
包含标题和内容，解释更详细的警告
|
||||
包含标题和内容，解释更详细的警告。
|
||||
|
||||
::: demo 除了必填的`title`属性外，你可以设置`description`属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
|
||||
```html
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
</style>
|
||||
|
||||
## Button 按钮
|
||||
常用的操作按钮
|
||||
常用的操作按钮。
|
||||
|
||||
### 基础用法
|
||||
|
||||
@ -146,7 +146,6 @@
|
||||
<el-button type="primary" icon="arrow-left">上一页</el-button>
|
||||
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon-right"></i></el-button>
|
||||
</el-button-group>
|
||||
<div></div>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="edit"></el-button>
|
||||
<el-button type="primary" icon="share"></el-button>
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
}
|
||||
</style>
|
||||
## Card 卡片
|
||||
将信息聚合在卡片容器中展示
|
||||
将信息聚合在卡片容器中展示。
|
||||
|
||||
### 基础用法
|
||||
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
}
|
||||
</style>
|
||||
## Dialog 对话框
|
||||
在保留当前页面状态的情况下，告知用户并承载相关操作
|
||||
在保留当前页面状态的情况下，告知用户并承载相关操作。
|
||||
|
||||
### 基本用法
|
||||
|
||||
@ -85,31 +85,6 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
|
||||
```
|
||||
:::
|
||||
|
||||
### 设置尺寸
|
||||
|
||||
:::demo 提供四种尺寸：`tiny`, `small`, `large`, `full`。通过`size`属性来设置。
|
||||
|
||||
```html
|
||||
<!-- tiny -->
|
||||
<el-button type="text" @click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
|
||||
|
||||
<el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
|
||||
<span>这是一段内容</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click.native="dialogTinyVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 全屏幕Dialog -->
|
||||
<el-button type="text" @click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
|
||||
|
||||
<el-dialog title="提示" v-model="dialogFullVisible" size="full">
|
||||
<img src="http://placekitten.com/1920/1280">
|
||||
</el-dialog>
|
||||
```
|
||||
:::
|
||||
|
||||
### 使用 Dialog 方法打开
|
||||
|
||||
:::demo 使用实例`open`和`close`方法，不用显式改变`v-modal`的值。
|
||||
@ -141,7 +116,7 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
|
||||
|
||||
### 自定义内容
|
||||
|
||||
Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例，除此以外，它们并没有什么特殊之处。
|
||||
Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@ -196,7 +171,7 @@ Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单
|
||||
| footer | Dialog 按钮操作区的内容 |
|
||||
|
||||
### 方法
|
||||
每个`el-dialog`实例都暴露了如下方法，用于在不显式改变`v-model`值的情况下打开 / 关闭实例：
|
||||
每个 `el-dialog` 实例都暴露了如下方法，用于在不显式改变 `v-model` 值的情况下打开 / 关闭实例：
|
||||
| 方法名 | 说明 |
|
||||
|------|--------|
|
||||
| open | 打开当前实例 |
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
|
||||
### 使用方法
|
||||
|
||||
直接通过设置类名为`el-icon-iconName`来使用即可。
|
||||
直接通过设置类名为 `el-icon-iconName` 来使用即可。例如：
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@ -74,8 +74,6 @@
|
||||
|
||||
### 图标集合
|
||||
|
||||
下面是目前 Element 所有的图标集合：
|
||||
|
||||
<ul class="icon-list">
|
||||
<li v-for="name in icons">
|
||||
<span>
|
||||
|
||||
@ -29,11 +29,11 @@
|
||||
|
||||
## Layout 布局
|
||||
|
||||
通过基础的 24 分栏，迅速简便地创建布局
|
||||
通过基础的 24 分栏，迅速简便地创建布局。
|
||||
|
||||
### 基础布局
|
||||
|
||||
使用单一分栏创建基础的栅格布局
|
||||
使用单一分栏创建基础的栅格布局。
|
||||
|
||||
::: demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。
|
||||
```html
|
||||
@ -68,7 +68,7 @@
|
||||
|
||||
### 分栏间隔
|
||||
|
||||
分栏之间存在间隔
|
||||
分栏之间存在间隔。
|
||||
|
||||
::: demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。
|
||||
```html
|
||||
@ -83,7 +83,7 @@
|
||||
|
||||
### 混合布局
|
||||
|
||||
通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局
|
||||
通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
|
||||
|
||||
::: demo
|
||||
```html
|
||||
@ -107,9 +107,9 @@
|
||||
|
||||
### 分栏偏移
|
||||
|
||||
分栏支持按一定的栏数进行偏移
|
||||
分栏支持按一定的栏数进行偏移。
|
||||
|
||||
::: demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数
|
||||
::: demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。
|
||||
```html
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
@ -129,7 +129,7 @@
|
||||
|
||||
对分栏进行灵活的对齐。
|
||||
|
||||
::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start,center,end,space-between,space-around 其中的值来定义子元素的排版方式
|
||||
::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
|
||||
```html
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
||||
|
||||
@ -28,13 +28,13 @@
|
||||
</script>
|
||||
## Loading 加载
|
||||
|
||||
加载数据时显示动效
|
||||
加载数据时显示动效。
|
||||
|
||||
### 区域加载
|
||||
|
||||
在表格等容器中加载数据时显示
|
||||
在表格等容器中加载数据时显示。
|
||||
|
||||
:::demo 在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加 `body` 修饰符，可以使遮罩插入至 DOM 中的 body 上。
|
||||
:::demo 在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加`body`修饰符，可以使遮罩插入至 DOM 中的 body 上。
|
||||
|
||||
```html
|
||||
<template>
|
||||
@ -55,9 +55,9 @@
|
||||
|
||||
### 整页加载
|
||||
|
||||
页面数据加载时显示
|
||||
页面数据加载时显示。
|
||||
|
||||
:::demo 当需要全屏遮罩时，可使用 `fullscreen` 修饰符（此时遮罩会插入至 body 上）
|
||||
:::demo 当需要全屏遮罩时，可使用`fullscreen`修饰符（此时遮罩会插入至 body 上）
|
||||
|
||||
```html
|
||||
<template>
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
|
||||
### 消息提示
|
||||
|
||||
当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭
|
||||
当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。
|
||||
|
||||
:::demo 调用`$alert`方法即可打开消息提示，它模拟了系统的 `alert`，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它会返回一个`Promise`对象便于进行后续操作的处理。
|
||||
```html
|
||||
@ -82,7 +82,7 @@
|
||||
|
||||
### 确认消息
|
||||
|
||||
提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框
|
||||
提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。
|
||||
|
||||
:::demo 调用`$confirm`方法即可打开消息提示，它模拟了系统的 `confirm`。Message Box 组件也拥有极高的定制性，我们可以传入`options`作为第三个参数，它是一个字面量对象。`type`字段表明消息类型，可以为`success`，`error`，`info`和`warning`，无效的设置将会被忽略。注意，第二个参数`title`必须定义为`String`类型，如果是`Object`，会被理解为`options`。在这里我们用了 Promise 来处理后续响应。
|
||||
|
||||
@ -117,7 +117,7 @@
|
||||
|
||||
### 提交内容
|
||||
|
||||
当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框
|
||||
当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。
|
||||
|
||||
:::demo 调用`$prompt`方法即可打开消息提示，它模拟了系统的 `prompt`。可以用`inputPattern`字段自己规定匹配模式，或者用`inputValidator`规定校验函数，可以返回`Boolean`或`String`，`Boolean`为`false`或字符串时均表示校验未通过，`String`相当于定义了`inputErrorMessage`字段。此外，可以用`inputPlaceholder`字段来定义输入框的占位符。
|
||||
|
||||
@ -153,7 +153,7 @@
|
||||
|
||||
### 自定义
|
||||
|
||||
可自定义配置不同内容
|
||||
可自定义配置不同内容。
|
||||
|
||||
:::demo 以上三个方法都是对`$msgbox`方法的再包装。本例直接调用`$msgbox`方法，使用了`showCancelButton`字段，用于显示取消按钮。另外可使用`cancelButtonClass`为其添加自定义样式，使用`cancelButtonText`来自定义按钮文本。Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表。
|
||||
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
|
||||
## Message 消息提示
|
||||
|
||||
反馈提示，比 Notification 更为小巧
|
||||
反馈提示，比 Notification 更为小巧。
|
||||
|
||||
### 基础用法
|
||||
|
||||
@ -136,7 +136,7 @@ Message 提供了四种类型：`success`，`info`，`warning`，`error`，由
|
||||
|
||||
### 可关闭
|
||||
|
||||
可以设置为手动关闭的 Message
|
||||
可以设置为手动关闭的 Message。
|
||||
|
||||
:::demo 默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用`showClose`字段。此外，和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。
|
||||
```html
|
||||
|
||||
Loading…
Reference in New Issue
Block a user