Skip to content

E
Element
Commit cd7ad1c9 authored by FuryBean's avatar FuryBean Committed by GitHub
Browse files
Options

Merge pull request #77 from csvwolf/next 

finish documents of basic & fix bug
parents 810c2827 cfaa0ab8
Show whitespace changes
Inline Side-by-side
Showing with 296 additions and 177 deletions
examples/docs/breadcrumb.md
View file @ cd7ad1c9
## 基础使用
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 | | 斜杠'/' |
examples/docs/button.md
View file @ cd7ad1c9
......@@ -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>
......
examples/docs/dialog.md
View file @ cd7ad1c9
......@@ -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>
......@@ -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 | 打开当前实例 |
......
examples/docs/loading.md
View file @ cd7ad1c9
......@@ -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>
......
examples/docs/message.md
View file @ cd7ad1c9
......@@ -47,7 +47,7 @@
this.$message({
showClose: true,
message: '错了哦，这是一条错误消息',
type: 'error'
type: 'warning'
});
},
......@@ -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>
......@@ -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>
......@@ -204,7 +218,7 @@ import { Message } from 'element-ui';
此时调用方法为 `Message(options)`。
## API
## Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| message | 消息文字 | string | | |
......
examples/docs/notification.md
View file @ cd7ad1c9
......@@ -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>
......@@ -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>
......@@ -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 | | |
examples/docs/pagination.md
View file @ cd7ad1c9
## 基础用法
适用广泛的基础用法。
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>
此例是一个完整的用例，使用了`sizechange`和`currentchange`事件来处理页码大小和当前页变动时候触发的事件。
```html
<el-pagination
layout="prev, pager, next"
:total="1000">
</el-pagination>
```
`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
<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>
</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` |
examples/docs/popover.md
View file @ cd7ad1c9
......@@ -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文本 |
examples/docs/progress.md
View file @ cd7ad1c9
......@@ -8,41 +8,37 @@
## 基础使用
一个基础的进度条
Progress 组件设置`percentage`属性即可，它接受`Number`类型，表示进度条对应的百分比，**必填**，必须在 0-100。
<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="small"></el-progress>
<el-progress :percentage="50" type="green" size="small"></el-progress>
</div>
`type`属性决定了进度条的样式，提供四种：`green`，`green-stripe`，`blue`，`blue-stripe`，带`stripe`的表示条纹效果，不在范围内将会报错，默认为`blue`。
```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>
```
`size`属性决定了进度条的大小，可以设置：`large`、`small`或不设置。
## 带条纹效果
下面是样例：
<div class="demo-box demo-progress">
<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>
</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 | |
examples/docs/tooltip.md
View file @ cd7ad1c9
......@@ -178,9 +178,11 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过
</div>
```html
<el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" transition="slide-fade" placement="bottom" effect="light">
<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>
</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 }` |
packages/message/src/main.vue
View file @ cd7ad1c9
......@@ -35,7 +35,7 @@
computed: {
typeClass() {
return `el-icon-${ typeMap[this.type] }`;
return typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : 'el-icon-information';
}
},
......
packages/notification/src/main.vue
View file @ cd7ad1c9
......@@ -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] }` : '';
}
},
......
packages/pagination/src/pagination.js
View file @ cd7ad1c9
......@@ -25,7 +25,7 @@ export default {
},
layout: {
default: 'prev, pager, next, jumper, slot, ->, total'
default: 'prev, pager, next, jumper, ->, total'
},
pageSizes: {
......
packages/progress/src/progress.vue
View file @ cd7ad1c9
......@@ -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: {
......
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