Skip to content

E
Element
Commit cfaa0ab8 authored by SkyAo's avatar SkyAo
Browse files
Options

add validator in progress & docs update

parent 066c8f72
Hide whitespace changes
Inline Side-by-side
Showing with 90 additions and 67 deletions
examples/docs/breadcrumb.md
View file @ cfaa0ab8
## 基础使用 ## 基础使用
Breadcrumb，面包屑导航，用于提供给用户一个回溯到首页的路径，最后一级即为当前位置。
在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。
Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。
<div> <div>
<el-breadcrumb> <el-breadcrumb separator="//">
<el-breadcrumb-item>Home</el-breadcrumb-item> <el-breadcrumb-item>Home</el-breadcrumb-item>
<el-breadcrumb-item>Page 1</el-breadcrumb-item> <el-breadcrumb-item>Page 1</el-breadcrumb-item>
<el-breadcrumb-item>Page 1-2</el-breadcrumb-item> <el-breadcrumb-item>Page 1-2</el-breadcrumb-item>
...@@ -11,7 +17,7 @@ ...@@ -11,7 +17,7 @@
```html ```html
<el-breadcrumb> <el-breadcrumb separator="//">
<el-breadcrumb-item>Home</el-breadcrumb-item> <el-breadcrumb-item>Home</el-breadcrumb-item>
<el-breadcrumb-item>Page 1</el-breadcrumb-item> <el-breadcrumb-item>Page 1</el-breadcrumb-item>
<el-breadcrumb-item>Page 1-2</el-breadcrumb-item> <el-breadcrumb-item>Page 1-2</el-breadcrumb-item>
...@@ -19,7 +25,7 @@ ...@@ -19,7 +25,7 @@
</el-breadcrumb> </el-breadcrumb>
``` ```
## API ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | 分隔符 | string | | 反斜杠'/' | | separator | 分隔符 | string | | 斜杠'/' |
examples/docs/dialog.md
View file @ cfaa0ab8
...@@ -146,7 +146,7 @@ Dialog 组件提供四种尺寸：`tiny`, `small`, `large`, `full`。通过`size ...@@ -146,7 +146,7 @@ Dialog 组件提供四种尺寸：`tiny`, `small`, `large`, `full`。通过`size
## 设置能否通过点击modal或按下esc关闭Dialog ## 设置能否通过点击modal或按下esc关闭Dialog
在默认条件下，你可以通过 ESC 和点击 modal 关闭 Dialog，但是可以通过设置`close-on-click-modal`属性和`close-on-press-escape`属性来关闭这一功能，它们接收`Boolean`，默认均为`true`。 在默认条件下，你可以通过 ESC 和点击背后的遮罩层关闭 Dialog，但是可以通过设置`close-on-click-modal`属性和`close-on-press-escape`属性来关闭这一功能，它们接收`Boolean`，默认均为`true`。
<el-button @click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button> <el-button @click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
......
examples/docs/notification.md
View file @ cfaa0ab8
...@@ -126,7 +126,7 @@ Element 也为 Notification 组件准备了四种通知类型：`success`, `warn ...@@ -126,7 +126,7 @@ Element 也为 Notification 组件准备了四种通知类型：`success`, `warn
this.$notify({ this.$notify({
title: '成功', title: '成功',
message: '这是一条成功的提示消息', message: '这是一条成功的提示消息',
type: 'success', type: 'success'
}); });
}, },
......
examples/docs/pagination.md
View file @ cfaa0ab8
## 基础用法 ## 基础用法
适用广泛的基础用法。
Pagination 组件实现分页，只要设置`Number`类型的`total`值即可，它代表页码的个数，之后我们还可以设置`layout`，代码需要显示的内容，用逗号分隔，布局元素会依次显示。
下例中，`prev`表示上一页，`next`为上一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示显示页码总数，`size`用于设置每页显示的页码数量。
<el-pagination <el-pagination
layout="prev, pager, next" layout="prev, pager, next"
:total="50"> :total="1000">
</el-pagination> </el-pagination>
```html ```html
...@@ -14,7 +17,8 @@ ...@@ -14,7 +17,8 @@
``` ```
## 小型分页 ## 小型分页
在空间有限的情况下，可以使用简单的小型分页。
在空间有限的情况下，可以使用简单的小型分页，只需要一个`small`属性，它接受一个`Boolean`，默认为`false`，设为`true`即可启用。
<el-pagination <el-pagination
small small
...@@ -30,37 +34,50 @@ ...@@ -30,37 +34,50 @@
</el-pagination> </el-pagination>
``` ```
## 复杂分页 ## 附加功能
能够承载复杂交互的分页，显示更多页码。
<el-pagination 此例是一个完整的用例，使用了`sizechange`和`currentchange`事件来处理页码大小和当前页变动时候触发的事件。
layout="prev, pager, next"
:total="1000">
</el-pagination>
```html `page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示100个，200个，300个或者400个。
<el-pagination
layout="prev, pager, next"
:total="1000">
</el-pagination>
```
## 附加功能 `page-size`接受一个`Number`，表示每页显示个数。
在复杂分页的基础上，根据场景需要，可以添加其他功能模块。
`current-page`接受一个`Number`，表示当前页页码。
<el-pagination <el-pagination
@sizechange="handleSizeChange" @sizechange="handleSizeChange"
@currentchange="handleCurrentChange" @currentchange="handleCurrentChange"
:current-page="5"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="sizes, prev, pager, next, jumper, total" layout="sizes, prev, pager, next, jumper, total"
:total="1000"> :total="1000">
</el-pagination> </el-pagination>
```html ```html
<el-pagination <template>
layout="sizes, prev, pager, next, jumper, total" <el-pagination
:total="1000"> @sizechange="handleSizeChange"
</el-pagination> @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> <script>
...@@ -76,19 +93,18 @@ ...@@ -76,19 +93,18 @@
} }
</script> </script>
## API ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------| |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| small | 小型分页样式 | Boolean | | false | | small | 是否使用小型分页样式 | Boolean | | false |
| page-size | 每页个数 | Number | | 10 | | page-size | 每页显示条目个数 | Number | | 10 |
| total | 总个数 | Number | | 0 | | total | 总条目数 | Number | | 0 |
| current-page | 当前页数 | Number | | 0| | current-page | 当前页数 | Number | | 0|
| layout | 组件布局，子组件名用逗号分隔。| String | `prev`, `pager`, `next`, `jumper`, `slot`, `->`, `total` | 'prev, pager, next, jumper, slot, ->, total' | | layout | 组件布局，子组件名用逗号分隔。| String | `size`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total' |
| page-sizes | 切换每页显示个数的子组件值 | Number[] | | [10, 20, 30, 40, 50, 100] | | page-sizes | 每页显示个数选择器的选项设置 | Number[] | | [10, 20, 30, 40, 50, 100] |
## 事件 ## Events
| 事件名称 | 说明 | 回调函数 | | 事件名称 | 说明 | 回调参数 |
|---------|--------|---------| |---------|--------|---------|
| sizechange | pageSize 改变时会触发 | `size` | | sizechange | pageSize 改变时会触发 | 每页条数`size` |
| currentchange | currentPage 改变时会触发 | `currentPage` | | currentchange | currentPage 改变时会触发 | 当前页`currentPage` |
examples/docs/popover.md
View file @ cfaa0ab8
...@@ -271,7 +271,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的 ...@@ -271,7 +271,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
| visible | 初始状态是否可见 | Boolean | | false | | visible | 初始状态是否可见 | Boolean | | false |
| offset | 出现位置的偏移量 | Number | | 0 | | offset | 出现位置的偏移量 | Number | | 0 |
| transition | 定义渐变动画 | String | | `fade-in-linear` | | 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 }` | | options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
## Slot ## Slot
......
examples/docs/progress.md
View file @ cfaa0ab8
...@@ -8,41 +8,37 @@ ...@@ -8,41 +8,37 @@
## 基础使用 ## 基础使用
一个基础的进度条 Progress 组件设置`percentage`属性即可，它接受`Number`类型，表示进度条对应的百分比，**必填**，必须在 0-100。
<div class="demo-box demo-progress"> `type`属性决定了进度条的样式，提供四种：`green`，`green-stripe`，`blue`，`blue-stripe`，带`stripe`的表示条纹效果，不在范围内将会报错，默认为`blue`。
<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>
```html `size`属性决定了进度条的大小，可以设置：`large`、`small`或不设置。
<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"> <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="blue-stripe" size="large"></el-progress>
<el-progress :percentage="50" type="green-stripe" size="large"></el-progress> <el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
</div> </div>
```html ```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="blue-stripe" size="large"></el-progress>
<el-progress :percentage="50" type="green-stripe" size="large"></el-progress> <el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
``` ```
## API ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| percentage | 百分比 | number | | 0 | | **percentage** | **百分比（必填）** | number | 0-100 | 0 |
| type | 类型 | string | blue,green,blue-stripe,green-stripe | blue | | type | 进度条样式 | string | blue,green,blue-stripe,green-stripe | blue |
| size | 尺寸 | string | large, small | | | size | 进度条尺寸 | string | large, small | |
examples/docs/tooltip.md
View file @ cfaa0ab8
...@@ -208,5 +208,5 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过 ...@@ -208,5 +208,5 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`，可以通过
| disabled | Tooltip 是否可用 | Boolean | | false | | disabled | Tooltip 是否可用 | Boolean | | false |
| offset | 出现位置的偏移量 | Number | | 0 | | offset | 出现位置的偏移量 | Number | | 0 |
| transition | 定义渐变动画 | String | | `fade-in-linear` | | 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 }` | | options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
packages/pagination/src/pagination.js
View file @ cfaa0ab8
...@@ -25,7 +25,7 @@ export default { ...@@ -25,7 +25,7 @@ export default {
}, },
layout: { layout: {
default: 'prev, pager, next, jumper, slot, ->, total' default: 'prev, pager, next, jumper, ->, total'
}, },
pageSizes: { pageSizes: {
......
packages/progress/src/progress.vue
View file @ cfaa0ab8
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
type ? 'el-progress--' + type : '' type ? 'el-progress--' + type : ''
]" ]"
> >
<div class="el-progress__bar" v-bind:style="barStyle"></div> <div class="el-progress__bar" :style="barStyle"></div>
</div> </div>
</template> </template>
<script> <script>
...@@ -15,13 +15,18 @@ ...@@ -15,13 +15,18 @@
props: { props: {
type: { type: {
type: String, 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: { percentage: {
type: Number, type: Number,
default: 0, default: 0,
required: true required: true,
validator: val => val >= 0 && val <= 100
} }
}, },
computed: { 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