github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #77 from csvwolf/next 

finish documents of basic & fix bug
pull/2/head
FuryBean 2016-08-22 14:29:10 +08:00 committed by GitHub
parent 810c282799 cfaa0ab858
commit cd7ad1c903
14 changed files with 299 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/docs/breadcrumb.md
View File

@ -1,7 +1,13 @@
## 基础使用
Breadcrumb，面包屑导航，用于提供给用户一个回溯到首页的路径，最后一级即为当前位置。
在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。
Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。
<div>
<el-breadcrumb>
<el-breadcrumb separator="//">
<el-breadcrumb-item>Home</el-breadcrumb-item>
<el-breadcrumb-item>Page 1</el-breadcrumb-item>
<el-breadcrumb-item>Page 1-2</el-breadcrumb-item>
@ -11,7 +17,7 @@
```html
<el-breadcrumb>
<el-breadcrumb separator="//">
<el-breadcrumb-item>Home</el-breadcrumb-item>
<el-breadcrumb-item>Page 1</el-breadcrumb-item>
<el-breadcrumb-item>Page 1-2</el-breadcrumb-item>
@ -19,7 +25,7 @@
</el-breadcrumb>
```
## API
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | 分隔符 | string | | 反斜杠'/' |
| separator | 分隔符 | string | | 斜杠'/' |

2
examples/docs/button.md
View File

@ -138,7 +138,7 @@ Button 组件提供的`loading`属性可以方便的让你处理 loading 状态
<el-button type="primary" icon="search">Search</el-button>
</div>
除此以外，你也可以设置在文字右边的 icon ，只要使用`i`标签即可，使用图标组件来实现它：
除此以外，你也可以设置在文字右边的 icon ，只要使用`i`标签即可，使用图标组件来实现它，由此，你可以使用自己的图标了：
<div class="demo-box demo-button">
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>

103
examples/docs/dialog.md
View File

@ -24,6 +24,7 @@
dialogFullVisible: false,
dialogStubbornVisible: false,
dialogTableVisible: false,
dialogBindVisible: false,
dialogFormVisible: false,
form: {
name: '',
@ -37,6 +38,11 @@
},
formLabelWidth: '80px'
};
},
methods: {
openDialog() {
this.$refs.dialogBind.open();
}
}
};
</script>
@ -51,7 +57,7 @@
}
.el-dialog__wrapper {
margin: 0;
}
}
.el-input {
width: 300px;
}
@ -60,7 +66,15 @@
## 基本用法
<el-button :plain="true" v-on:click.native="dialogVisible = true">点击打开 Dialog</el-button>
Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只是弹出框，可以尝试 MessageBox 组件。
要使用 Dialog 组件，首先你需要设置`v-model`属性，它接收`Boolean`，当为`true`时显示 Dialog。
Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。
`title`属性用于定义标题，它是可选的，默认值为空，下面是一个最简单的用例：
<el-button :plain="true" @click.native="dialogVisible = true">点击打开 Dialog</el-button>
<div class="demo-box demo-dialog">
<el-dialog title="提示" v-model="dialogVisible">
@ -73,7 +87,7 @@
</div>
```html
<el-button :plain="true" v-on:click.native="dialogVisible = true">点击打开 Dialog</el-button>
<el-button :plain="true" @click.native="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog title="提示" v-model="dialogVisible">
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
@ -86,7 +100,9 @@
## 设置尺寸
<el-button :plain="true" v-on:click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
Dialog 组件提供四种尺寸：`tiny`, `small`, `large`, `full`。通过`size`属性来设置，下面是一个 tiny 的例子。
<el-button :plain="true" @click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
<div class="demo-box demo-dialog">
<el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
@ -99,7 +115,7 @@
</div>
```html
<el-button :plain="true" v-on:click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
<el-button :plain="true" @click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
<el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
<span>这是一段内容</span>
@ -110,7 +126,9 @@
</el-dialog>
```
<el-button v-on:click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
下面是一个全屏幕 Dialog 的样例：
<el-button @click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
<div class="demo-box demo-dialog">
<el-dialog title="提示" v-model="dialogFullVisible" size="full">
@ -119,16 +137,18 @@
</div>
```html
<el-button v-on:click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
<el-button @click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
<el-dialog title="提示" v-model="dialogFullVisible" size="full">
<img src="http://placekitten.com/1920/1280">
</el-dialog>
```
## 设置能否通过点击modal或按下esc关闭dialog
## 设置能否通过点击modal或按下esc关闭Dialog
<el-button v-on:click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
在默认条件下，你可以通过 ESC 和点击背后的遮罩层关闭 Dialog，但是可以通过设置`close-on-click-modal`属性和`close-on-press-escape`属性来关闭这一功能，它们接收`Boolean`，默认均为`true`。
<el-button @click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
<div class="demo-box demo-dialog">
<el-dialog title="提示"
@ -140,7 +160,7 @@
</div>
```html
<el-button v-on:click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
<el-button @click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
<el-dialog title="提示"
v-model="dialogStubbornVisible"
@ -150,9 +170,45 @@
</el-dialog>
```
## 使用 Dialog 方法打开
使用`v-model`确实是一个不错的做法，为了一些特殊需求，我们暴露了实例`open`和`close`方法，你可以不用显式改变`v-modal`的值了：
<el-button @click.native="openDialog()">使用Dialog方法</el-button>
<div class="demo-box demo-dialog">
<el-dialog title="提示" v-model="dialogBindVisible" ref="dialogBind">
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
</el-dialog>
</div>
```html
<template>
<el-dialog title="提示" v-model="dialogBindVisible" ref="dialogBind">
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogBindVisible: false
}
},
methods: {
openDialog() {
this.$refs.dialogBind.open();
}
}
};
</script>
```
## 自定义内容
<el-button v-on:click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例，除此以外，它们并没有什么特殊之处：
<el-button @click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<div class="demo-box demo-dialog">
<el-dialog title="收货地址" v-model="dialogTableVisible">
@ -164,7 +220,7 @@
</el-dialog>
</div>
<el-button v-on:click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-button @click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<div class="demo-box demo-dialog">
<el-dialog title="收货地址" v-model="dialogFormVisible">
@ -187,7 +243,7 @@
</div>
```html
<el-button v-on:click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-button @click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog title="收货地址" v-model="dialogTableVisible">
<el-table :data="gridData">
@ -197,7 +253,7 @@
</el-table>
</el-dialog>
<el-button v-on:click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-button @click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" v-model="dialogFormVisible">
<el-form :models="form">
@ -218,23 +274,24 @@
</el-dialog>
```
## API
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | dialog 的标题 | string | | |
| size | dialog 的大小 | string | 'tiny', 'small', 'large', 'full' | 'small' |
| customClass | dialog 的自定义类名 | string | | |
| closeOnClickModal | 是否可以通过点击 modal 关闭 dialog | boolean | | true |
| closeOnPressEscape | 是否可以通过按下 esc 关闭 dialog | boolean | | true |
| title | Dialog 的标题 | string | | |
| size | Dialog 的大小 | string | 'tiny', 'small', 'large', 'full' | 'small' |
| modal | 是否需要遮罩层 | boolean | | true |
| customClass | Dialog 的自定义类名 | string | | |
| closeOnClickModal | 是否可以通过点击 modal 关闭 Dialog | boolean | | true |
| closeOnPressEscape | 是否可以通过按下 ESC 关闭 Dialog | boolean | | true |
## Slot
| name | 说明 |
|------|--------|
| - | dialog 的内容 |
| footer | dialog 按钮操作区的内容 |
| - | Dialog 的内容 |
| footer | Dialog 按钮操作区的内容 |
## 方法
每个 el-dialog 实例都暴露了如下方法，用于在不使用 v-model 的情况下打开 / 关闭实例：
每个`el-dialog`实例都暴露了如下方法，用于在不显式改变`v-model`值的情况下打开 / 关闭实例：
| 方法名 | 说明 |
|------|--------|
| open | 打开当前实例 |

24
examples/docs/loading.md
View File

@ -3,7 +3,7 @@
border: solid 1px #999;
padding: 10px;
text-align: center;
p {
font-size: 30px;
color: #999;
@ -43,7 +43,7 @@
}]
}
},
methods: {
loadTable() {
this.tableLoading = true;
@ -51,7 +51,7 @@
this.tableLoading = false;
}, 2000);
},
openFullScreen() {
this.fullscreenLoading = true;
setTimeout(() => {
@ -64,14 +64,16 @@
## 基本用法
<el-button :plain="true" v-on:click.native="loading = !loading">打开 / 关闭 loading</el-button>
在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可，默认状况下，Loading 遮罩会插入到绑定元素的子节点。
<el-button :plain="true" @click.native="loading = !loading">打开 / 关闭 loading</el-button>
<div v-loading="loading" class="el-loading-demo">
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
</div>
```html
<el-button :plain="true" v-on:click.native="loading = !loading">打开 / 关闭 loading</el-button>
<el-button :plain="true" @click.native="loading = !loading">打开 / 关闭 loading</el-button>
<div v-loading="loading" class="el-loading-demo">
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
@ -80,16 +82,16 @@
## 修饰符
loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过添加 `body` 修饰符，可以使遮罩插入至 body 上
Loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过添加 `body` 修饰符，可以使遮罩插入至 DOM 中的 body 上。
<el-button :plain="true" v-on:click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
<el-button :plain="true" @click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
<div v-loading.body="loading2" class="el-loading-demo">
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
</div>
```html
<el-button :plain="true" v-on:click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
<el-button :plain="true" @click.native="loading2 = !loading2">打开 / 关闭 loading</el-button>
<div v-loading.body="loading2" class="el-loading-demo">
<p>点击上面的按钮，本区域显示 loading 遮罩</p>
@ -98,13 +100,13 @@ loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过
当需要全屏遮罩时，可使用 `fullscreen` 修饰符（此时遮罩会插入至 body 上）
<el-button :plain="true" v-on:click.native="openFullScreen" v-loading.fullscreen="fullscreenLoading">打开全屏 loading</el-button>
<el-button :plain="true" @click.native="openFullScreen" v-loading.fullscreen="fullscreenLoading">打开全屏 loading</el-button>
```html
<template>
<el-button
:plain="true"
v-on:click.native="openFullScreen"
@click.native="openFullScreen"
v-loading.fullscreen="fullscreenLoading">
打开全屏 loading
</el-button>
@ -127,4 +129,4 @@ loading 遮罩默认插入至绑定了 `v-loading` 指令的元素上。通过
}
}
</script>
```
```

76
examples/docs/message.md
View File

@ -6,35 +6,35 @@
message: '这是一条消息提示'
});
},
open2() {
this.$message({
message: '恭喜你，这是一条成功消息',
type: 'success'
});
},
open3() {
this.$message({
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
open4() {
this.$message({
message: '错了哦，这是一条错误消息',
type: 'error'
});
},
open5() {
this.$message({
showClose: true,
message: '恭喜你，这是一条成功消息'
});
},
open6() {
this.$message({
showClose: true,
@ -42,22 +42,22 @@
type: 'warning'
});
},
open7() {
this.$message({
showClose: true,
message: '错了哦，这是一条错误消息',
type: 'error'
type: 'warning'
});
},
open8() {
this.$message({
showClose: true,
message: '错了哦，这是一条错误消息',
type: 'error'
});
}
}
}
};
</script>
@ -72,13 +72,17 @@
## 基本用法
Message 系统了反馈提示，它比 Notification 更为小巧，可以根据需要来使用它们，在配置上，它们非常类似，所以部分 Notification 的 options 我们不会做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。
Element 注册了一个`$message`方法用于调用，Message 同样接收一个`options`字面量，`message`参数能定义正文内容，下面是最简单的样例：
<div class="demo-box demo-message">
<el-button :plain="true" v-on:click.native="open">打开消息提示</el-button>
<el-button :plain="true" @click.native="open">打开消息提示</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open">打开消息提示</el-button>
<el-button :plain="true" @click.native="open">打开消息提示</el-button>
</template>
<script>
@ -95,17 +99,22 @@
```
## 不同状态
Message 同样提供了四种类型：`success`，`info`，`warning`，`error`，由不同图标表示，设置`type`字段来定义它们，默认为`info`，如果设置其他值将被忽略。
你可以通过下面的按钮来体验它们：
<div class="demo-box demo-message">
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click.native="open4">错误</el-button>
<el-button :plain="true" @click.native="open2">成功</el-button>
<el-button :plain="true" @click.native="open3">警告</el-button>
<el-button :plain="true" @click.native="open4">错误</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click.native="open4">错误</el-button>
<el-button :plain="true" @click.native="open2">成功</el-button>
<el-button :plain="true" @click.native="open3">警告</el-button>
<el-button :plain="true" @click.native="open4">错误</el-button>
</template>
<script>
@ -117,14 +126,14 @@
type: 'success'
});
},
open3() {
this.$message({
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
open4() {
this.$message({
message: '错了哦，这是一条错误消息',
@ -137,19 +146,24 @@
```
## 可关闭
默认的 Message 是不可以被人工关闭的，如果需要可关闭的 Message，可以使用`showClose`字段，它接受一个`Boolean`，`true`为允许关闭。
注意：和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。
<div class="demo-box demo-message">
<el-button :plain="true" v-on:click.native="open5">消息</el-button>
<el-button :plain="true" v-on:click.native="open6">成功</el-button>
<el-button :plain="true" v-on:click.native="open7">警告</el-button>
<el-button :plain="true" v-on:click.native="open8">错误</el-button>
<el-button :plain="true" @click.native="open5">消息</el-button>
<el-button :plain="true" @click.native="open6">成功</el-button>
<el-button :plain="true" @click.native="open7">警告</el-button>
<el-button :plain="true" @click.native="open8">错误</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open5">消息</el-button>
<el-button :plain="true" v-on:click.native="open6">成功</el-button>
<el-button :plain="true" v-on:click.native="open7">警告</el-button>
<el-button :plain="true" v-on:click.native="open8">错误</el-button>
<el-button :plain="true" @click.native="open5">消息</el-button>
<el-button :plain="true" @click.native="open6">成功</el-button>
<el-button :plain="true" @click.native="open7">警告</el-button>
<el-button :plain="true" @click.native="open8">错误</el-button>
</template>
<script>
@ -161,7 +175,7 @@
message: '恭喜你，这是一条成功消息'
});
},
open6() {
this.$message({
showClose: true,
@ -169,7 +183,7 @@
type: 'warning'
});
},
open7() {
this.$message({
showClose: true,
@ -177,7 +191,7 @@
type: 'error'
});
},
open8() {
this.$message({
showClose: true,
@ -204,7 +218,7 @@ import { Message } from 'element-ui';
此时调用方法为 `Message(options)`。
## API
## Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| message | 消息文字 | string | | |

70
examples/docs/notification.md
View File

@ -7,7 +7,7 @@
message: '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'
});
},
open2() {
this.$notify({
title: '成功',
@ -15,7 +15,7 @@
type: 'success'
});
},
open3() {
this.$notify({
title: '警告',
@ -23,7 +23,7 @@
type: 'warning'
});
},
open4() {
this.$notify({
title: '消息',
@ -31,7 +31,7 @@
type: 'info'
});
},
open5() {
this.$notify({
title: '错误',
@ -39,7 +39,7 @@
type: 'error'
});
},
open6() {
this.$notify({
title: '提示',
@ -47,7 +47,7 @@
duration: 0
});
},
open7() {
this.$notify({
title: '提示',
@ -55,7 +55,7 @@
onClose: this.onClose
});
},
onClose() {
console.log('Notification 已关闭');
}
@ -73,13 +73,15 @@
## 基本用法
Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，最简单的条件下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文，下面是一个最简单的情况的样例：
<div class="demo-box demo-notification">
<el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
<el-button :plain="true" @click.native="open">点击展示 Notification</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
<el-button :plain="true" @click.native="open">点击展示 Notification</el-button>
</template>
<script>
@ -98,19 +100,23 @@
## 带有 icon
Element 也为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。
通过`type`字段来设置，除此以外的值将被忽略，下面是四种类型的样例：
<div class="demo-box demo-notification">
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click.native="open4">消息</el-button>
<el-button :plain="true" v-on:click.native="open5">错误</el-button>
<el-button :plain="true" @click.native="open2">成功</el-button>
<el-button :plain="true" @click.native="open3">警告</el-button>
<el-button :plain="true" @click.native="open4">消息</el-button>
<el-button :plain="true" @click.native="open5">错误</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click.native="open4">消息</el-button>
<el-button :plain="true" v-on:click.native="open5">错误</el-button>
<el-button :plain="true" @click.native="open2">成功</el-button>
<el-button :plain="true" @click.native="open3">警告</el-button>
<el-button :plain="true" @click.native="open4">消息</el-button>
<el-button :plain="true" @click.native="open5">错误</el-button>
</template>
<script>
@ -123,7 +129,7 @@
type: 'success'
});
},
open3() {
this.$notify({
title: '警告',
@ -131,7 +137,7 @@
type: 'warning'
});
},
open4() {
this.$notify({
title: '消息',
@ -139,7 +145,7 @@
type: 'info'
});
},
open5() {
this.$notify({
title: '错误',
@ -153,13 +159,18 @@
```
## 不会自动关闭
默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 `duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭，下面是一个不会自动关闭的样例：
注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。
<div class="demo-box demo-notification">
<el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
<el-button :plain="true" @click.native="open6">不会自动关闭的 Notification</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
<el-button :plain="true" @click.native="open6">不会自动关闭的 Notification</el-button>
</template>
<script>
@ -178,13 +189,16 @@
```
## 回调函数
Element 为关闭操作设置了回调函数，在关闭时会触发`onClose`，你可以通过设置`onClose`参数来处理后续操作，它是一个`Function`，下面是一个样例，会在控制台输出：Notification 已关闭。
<div class="demo-box demo-notification">
<el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
<el-button :plain="true" @click.native="open7">带有回调函数的 Notification</el-button>
</div>
```html
<template>
<el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
<el-button :plain="true" @click.native="open7">带有回调函数的 Notification</el-button>
</template>
<script>
@ -197,7 +211,7 @@
onClose: this.onClose
});
},
onClose() {
console.log('Notification 已关闭');
}
@ -208,7 +222,7 @@
## 全局方法
element 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 `Notification`。
Element 为 Vue.prototype 添加了全局方法 $notify。因此在 vue instance 中可以采用本页面中的方式调用 `Notification`。
## 单独引用
@ -220,11 +234,11 @@ import { Notification } from 'element-ui';
此时调用方法为 `Notification(options)`。
## API
## Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | 标题 | string | | |
| message | 说明文字 | string | | |
| type | 主题 | string | 'success', 'warning', 'info', 'error' | |
| type | 主题样式，如果不在可选值内将被忽略 | string | 'success', 'warning', 'info', 'error' | |
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | | 4500 |
| onClose | 关闭时的回调函数 | function | | |

84
examples/docs/pagination.md
View File

@ -1,9 +1,12 @@
## 基础用法
适用广泛的基础用法。
Pagination 组件实现分页，只要设置`Number`类型的`total`值即可，它代表页码的个数，之后我们还可以设置`layout`，代码需要显示的内容，用逗号分隔，布局元素会依次显示。
下例中，`prev`表示上一页，`next`为上一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示显示页码总数，`size`用于设置每页显示的页码数量。
<el-pagination
layout="prev, pager, next"
:total="50">
:total="1000">
</el-pagination>
```html
@ -14,7 +17,8 @@
```
## 小型分页
在空间有限的情况下，可以使用简单的小型分页。
在空间有限的情况下，可以使用简单的小型分页，只需要一个`small`属性，它接受一个`Boolean`，默认为`false`，设为`true`即可启用。
<el-pagination
small
@ -30,37 +34,50 @@
</el-pagination>
```
## 复杂分页
能够承载复杂交互的分页，显示更多页码。
<el-pagination
layout="prev, pager, next"
:total="1000">
</el-pagination>
```html
<el-pagination
layout="prev, pager, next"
:total="1000">
</el-pagination>
```
## 附加功能
在复杂分页的基础上，根据场景需要，可以添加其他功能模块。
此例是一个完整的用例，使用了`sizechange`和`currentchange`事件来处理页码大小和当前页变动时候触发的事件。
`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示100个，200个，300个或者400个。
`page-size`接受一个`Number`，表示每页显示个数。
`current-page`接受一个`Number`，表示当前页页码。
<el-pagination
@sizechange="handleSizeChange"
@currentchange="handleCurrentChange"
:current-page="5"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="sizes, prev, pager, next, jumper, total"
:total="1000">
</el-pagination>
```html
<el-pagination
layout="sizes, prev, pager, next, jumper, total"
:total="1000">
</el-pagination>
<template>
<el-pagination
@sizechange="handleSizeChange"
@currentchange="handleCurrentChange"
:current-page="5"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="sizes, prev, pager, next, jumper, total"
:total="1000">
</el-pagination>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
}
}
</script>
```
<script>
@ -76,19 +93,18 @@
}
</script>
## API
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| small | 小型分页样式 | Boolean | | false |
| page-size | 每页个数 | Number | | 10 |
| total | 总个数 | Number | | 0 |
| small | 是否使用小型分页样式 | Boolean | | false |
| page-size | 每页显示条目个数 | Number | | 10 |
| total | 总条目数 | Number | | 0 |
| current-page | 当前页数 | Number | | 0|
| layout | 组件布局，子组件名用逗号分隔。| String | `prev`, `pager`, `next`, `jumper`, `slot`, `->`, `total` | 'prev, pager, next, jumper, slot, ->, total' |
| page-sizes | 切换每页显示个数的子组件值 | Number[] | | [10, 20, 30, 40, 50, 100] |
| layout | 组件布局，子组件名用逗号分隔。| String | `size`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total' |
| page-sizes | 每页显示个数选择器的选项设置 | Number[] | | [10, 20, 30, 40, 50, 100] |
## 事件
| 事件名称 | 说明 | 回调函数 |
## Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| sizechange | pageSize 改变时会触发 | `size` |
| currentchange | currentPage 改变时会触发 | `currentPage` |
| sizechange | pageSize 改变时会触发 | 每页条数`size` |
| currentchange | currentPage 改变时会触发 | 当前页`currentPage` |

31
examples/docs/popover.md
View File

@ -113,7 +113,11 @@
</style>
## 基础用法
可选择提示出现的位置。
Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
要使用它，必须设置索引`ref`，在按钮中，我们注册了自定义指令`v-popover`，指向索引ID。
`trigger`属性用于设置何时触发 Popover ，提供三种触发方式：`hover`, `click` 和 `focus`，下面是样例，一些没有做解释的属性是与 Tooltip 一致的。
<div class="demo-box demo-popover">
<el-popover
@ -184,7 +188,8 @@
```
## 嵌套信息
可以嵌套表格等多种信息。
和其他组件一样，Popover 组件也可以利用分发取代`content`属性，下面我们嵌套了一个表格：
<div class="demo-box demo-popover">
<el-popover
@ -220,7 +225,8 @@
## 嵌套操作
常用于确认操作中,比 Dialog 更加轻量。
当然，你还可以嵌套操作，这相比 Dialog 更为轻量：
<div class="demo-box demo-popover">
<el-popover
@ -230,8 +236,8 @@
:visible.sync="visible2">
<p>这是一段内容这是一段内容确定删除吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" v-on:click="visible2 = false">取消</el-button>
<el-button type="primary" size="mini" v-on:click="visible2 = false">确定</el-button>
<el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
</div>
</el-popover>
@ -246,8 +252,8 @@
:visible.sync="visible2">
<p>这是一段内容这是一段内容确定删除吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" v-on:click="visible2 = false">取消</el-button>
<el-button type="primary" size="mini" v-on:click="visible2 = false">确定</el-button>
<el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
</div>
</el-popover>
@ -259,15 +265,16 @@
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| trigger | 触发方式 | String | 'click', 'focus', 'hover' | click |
| title | 标题 | String | | |
| content | 显示的内容 | 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, String | | 0 |
| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | { boundariesElement: 'body' } |
| 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 显示的元素|
| content | 显示的 HTML 内容 |
| - | Popover内嵌HTML文本 |

42
examples/docs/progress.md
View File

@ -8,41 +8,37 @@
## 基础使用
一个基础的进度条
Progress 组件设置`percentage`属性即可，它接受`Number`类型，表示进度条对应的百分比，**必填**，必须在 0-100。
`type`属性决定了进度条的样式，提供四种：`green`，`green-stripe`，`blue`，`blue-stripe`，带`stripe`的表示条纹效果，不在范围内将会报错，默认为`blue`。
`size`属性决定了进度条的大小，可以设置：`large`、`small`或不设置。
下面是样例：
<div class="demo-box demo-progress">
<el-progress :percentage="50" size="large"></el-progress>
<el-progress :percentage="50" type="green" size="large"></el-progress>
<el-progress :percentage="50"></el-progress>
<el-progress :percentage="50" type="green"></el-progress>
<el-progress :percentage="50" size="large"></el-progress>
<el-progress :percentage="50" size="small"></el-progress>
<el-progress :percentage="50" type="green" size="small"></el-progress>
</div>
```html
<el-progress :percentage="50" size="large"></el-progress>
<el-progress :percentage="50" type="green" size="large"></el-progress>
<el-progress :percentage="50"></el-progress>
<el-progress :percentage="50" type="green"></el-progress>
<el-progress :percentage="50" size="small"></el-progress>
<el-progress :percentage="50" type="green" size="small"></el-progress>
```
## 带条纹效果
<div class="demo-box demo-progress">
<el-progress :percentage="50" type="green"></el-progress>
<el-progress :percentage="50" type="blue"></el-progress>
<el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
<el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
</div>
```html
<el-progress :percentage="50"></el-progress>
<el-progress :percentage="50" size="large"></el-progress>
<el-progress :percentage="50" size="small"></el-progress>
<el-progress :percentage="50" type="green"></el-progress>
<el-progress :percentage="50" type="blue"></el-progress>
<el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
<el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
```
## API
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| percentage | 百分比 | number | | 0 |
| type | 类型 | string | blue,green,blue-stripe,green-stripe | blue |
| size | 尺寸 | string | large, small | |
| **percentage** | **百分比（必填）** | number | 0-100 | 0 |
| type | 进度条样式 | string | blue,green,blue-stripe,green-stripe | blue |
| size | 进度条尺寸 | string | large, small | |

11
examples/docs/tooltip.md
View File

@ -178,9 +178,11 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过
</div>
```html
<el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" transition="slide-fade" placement="bottom" effect="light">
<el-button @click.native="disabled=true">点击关闭 tooltip 功能</el-button>
</el-tooltip>
<template>
<el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" transition="slide-fade" placement="bottom" effect="light">
<el-button @click.native="disabled=true">点击关闭 tooltip 功能</el-button>
</el-tooltip>
</template>
<style>
.slide-fade-enter-active {
@ -204,6 +206,7 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过
| 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` |
| visibleArrow | 是否显示 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 }` |

2
packages/message/src/main.vue
View File

@ -35,7 +35,7 @@
computed: {
typeClass() {
return `el-icon-${ typeMap[this.type] }`;
return typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : 'el-icon-information';
}
},

5
packages/notification/src/main.vue
View File

@ -2,7 +2,7 @@
<transition name="el-notification-fade">
<div class="el-notification" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
<i class="el-notification__icon" :class="[ typeClass ]" v-if="type"></i>
<div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
<div class="el-notification__group" :style="{ 'margin-left': typeClass ? '55px' : '0' }">
<span>{{ title }}</span>
<p>{{ message }}</p>
<div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
@ -28,7 +28,6 @@
duration: 4500,
type: '',
onClose: null,
closed: false,
top: null,
timer: null
@ -37,7 +36,7 @@
computed: {
typeClass() {
return this.type ? `el-icon-${ typeMap[this.type] }` : '';
return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : '';
}
},

2
packages/pagination/src/pagination.js
View File

@ -25,7 +25,7 @@ export default {
},
layout: {
default: 'prev, pager, next, jumper, slot, ->, total'
default: 'prev, pager, next, jumper, ->, total'
},
pageSizes: {

13
packages/progress/src/progress.vue
View File

@ -6,7 +6,7 @@
type ? 'el-progress--' + type : ''
]"
>
<div class="el-progress__bar" v-bind:style="barStyle"></div>
<div class="el-progress__bar" :style="barStyle"></div>
</div>
</template>
<script>
@ -15,13 +15,18 @@
props: {
type: {
type: String,
default: 'blue'
default: 'blue',
validator: val => ['blue', 'blue-stripe', 'green', 'green-stripe'].indexOf(val) > -1
},
size: {
type: String,
validator: val => !val || ['large', 'small'].indexOf(val) > -1
},
size: String,
percentage: {
type: Number,
default: 0,
required: true
required: true,
validator: val => val >= 0 && val <= 100
}
},
computed: {