mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-03 04:39:09 +08:00
Merge pull request #13 from csvwolf/master
update icon/input-number/pagination/button/dropdown docs
This commit is contained in:
杨奕
GitHub
commit
5da8d158ba
@ -11,6 +11,13 @@
|
||||
console.log(event);
|
||||
alert('button clicked!');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
let demos = document.querySelectorAll('.source');
|
||||
let thirdDemo = demos[2];
|
||||
thirdDemo.classList.add('intro-block');
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -30,6 +37,30 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo-button .intro-block {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demo-button .intro-block .block {
|
||||
padding: 30px 24px;
|
||||
overflow: hidden;
|
||||
border-bottom: solid 1px #EFF2F6;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-button .intro-block .demonstration {
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.demo-button .intro-block .wrapper {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Button 按钮
|
||||
@ -68,22 +99,24 @@
|
||||
:::demo 朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。设置`plain`属性，它接受一个`Boolean`。注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。
|
||||
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="block">
|
||||
<span class="demonstration">默认显示颜色</span>
|
||||
<span class="wrapper">
|
||||
<el-button type="success">成功按钮</el-button>
|
||||
<el-button type="warning">警告按钮</el-button>
|
||||
<el-button type="danger">危险按钮</el-button>
|
||||
<el-button type="info">信息按钮</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
</span>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">hover 显示颜色</span>
|
||||
<span class="wrapper">
|
||||
<el-button :plain="true" type="success">成功按钮</el-button>
|
||||
<el-button :plain="true" type="warning">警告按钮</el-button>
|
||||
<el-button :plain="true" type="danger">危险按钮</el-button>
|
||||
<el-button :plain="true" type="info">信息按钮</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -141,7 +174,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
|
||||
|
||||
```html
|
||||
<el-button type="primary" size="large">large</el-button>
|
||||
<el-button type="primary">Default</el-button>
|
||||
<el-button type="primary">default</el-button>
|
||||
<el-button type="primary" size="small">small</el-button>
|
||||
<el-button type="primary" size="mini">mini</el-button>
|
||||
```
|
||||
|
||||
@ -11,6 +11,24 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo-dropdown .block {
|
||||
display: inline-block;
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
flex: 1;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-dropdown .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@ -19,6 +37,14 @@
|
||||
handleMainClick() {
|
||||
alert('click main button');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
let demos = document.querySelectorAll('.source');
|
||||
let lastDemo = demos[demos.length - 1];
|
||||
lastDemo.style.padding = '0';
|
||||
lastDemo.style.display = 'flex';
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -33,11 +59,12 @@
|
||||
:::demo 通过`text`属性来设置按钮文字。默认条件下，他由一个主要按钮和一个下拉按钮组成，`el-dropdown`中的主要按钮同样可以设置点击事件，只要使用`mainclick`事件即可。默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。
|
||||
|
||||
```html
|
||||
<el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item>选项四</el-dropdown-item>
|
||||
<el-dropdown text="下拉菜单" type="text" :icon-separate="false" @mainclick="handleMainClick()">
|
||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item>狮子头</el-dropdown-item>
|
||||
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
||||
<el-dropdown-item>双皮奶</el-dropdown-item>
|
||||
<el-dropdown-item>蚵仔煎</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
```
|
||||
:::
|
||||
@ -71,18 +98,24 @@
|
||||
|
||||
:::demo 在`trigger`属性设置为`click`即可。
|
||||
```html
|
||||
<el-dropdown text="主要按钮" type="primary" trigger="hover">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item>选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
<el-dropdown text="下拉菜单" type="primary" :icon-separate="false" trigger="click">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
<div class="block">
|
||||
<span class="demonstration">hover 激活</span>
|
||||
<el-dropdown text="下拉菜单" type="text" :icon-separate="false" trigger="hover">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item>选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">click 激活</span>
|
||||
<el-dropdown text="下拉菜单" type="text" :icon-separate="false" trigger="click">
|
||||
<el-dropdown-item>选项一</el-dropdown-item>
|
||||
<el-dropdown-item>选项二</el-dropdown-item>
|
||||
<el-dropdown-item>选项三</el-dropdown-item>
|
||||
<el-dropdown-item class="divider">选项四</el-dropdown-item>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -10,6 +10,12 @@
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.source>i {
|
||||
margin: 0 10px;
|
||||
font-size: 1.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon-list {
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
@ -58,7 +64,9 @@
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<i class="el-icon-search"></i>
|
||||
<i class="el-icon-edit"></i>
|
||||
<i class="el-icon-share"></i>
|
||||
<i class="el-icon-delete"></i>
|
||||
<el-button type="primary" icon="search">搜索</el-button>
|
||||
|
||||
```
|
||||
|
||||
@ -28,8 +28,6 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
需要标准的数字值时可以用到 Input Number 组件，它提供了数值输入，范围控制和递增递减的步数控制等功能。
|
||||
|
||||
:::demo 要使用它，只需要在`el-input-number`元素中使用`v-model`绑定变量即可，变量的初始值即为默认值。
|
||||
```html
|
||||
<template>
|
||||
@ -68,19 +66,6 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 尺寸
|
||||
|
||||
和其他组件一样，Input Number 同样具有不同的尺寸。
|
||||
|
||||
:::demo 三种尺寸：`large`，`small`以及默认，只需要设置`size`属性即可。
|
||||
|
||||
```html
|
||||
<el-input-number v-model="num1" size="large"></el-input-number>
|
||||
<el-input-number v-model="num1"></el-input-number>
|
||||
<el-input-number v-model="num1" size="small"></el-input-number>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|----------|-------------- |----------|-------------------------------- |-------- |
|
||||
|
||||
@ -6,10 +6,21 @@
|
||||
|
||||
:::demo 设置`layout`，表示需要显示的内容，用逗号分隔，布局元素会依次显示。`prev`表示上一页，`next`为上一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示显示页码总数，`size`用于设置每页显示的页码数量。
|
||||
```html
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
<div class="block">
|
||||
<span class="demonstration">页数较少时的效果</span>
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">大于7页时的效果</span>
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -27,77 +38,60 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 复杂分页
|
||||
|
||||
能够承载复杂交互的分页。
|
||||
|
||||
:::demo `total`只要足够大，就会产生复杂分页的样式。
|
||||
```html
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
```
|
||||
:::
|
||||
|
||||
### 附加功能
|
||||
|
||||
:::demo 此例是一个完整的用例，使用了`sizechange`和`currentchange`事件来处理页码大小和当前页变动时候触发的事件。`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-pagination
|
||||
@sizechange="handleSizeChange"
|
||||
@currentchange="handleCurrentChange"
|
||||
:current-page="5"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="total, prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-pagination
|
||||
@sizechange="handleSizeChange"
|
||||
@currentchange="handleCurrentChange"
|
||||
:current-page="5"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="sizes, prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-pagination
|
||||
@sizechange="handleSizeChange"
|
||||
@currentchange="handleCurrentChange"
|
||||
:current-page="5"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="prev, pager, next, jumper"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-pagination
|
||||
@sizechange="handleSizeChange"
|
||||
@currentchange="handleCurrentChange"
|
||||
:current-page="5"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="block">
|
||||
<span class="demonstration">显示总数</span>
|
||||
<el-pagination
|
||||
@sizechange="handleSizeChange"
|
||||
@currentchange="handleCurrentChange"
|
||||
:current-page="5"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="total, prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">调整每页显示条数</span>
|
||||
<el-pagination
|
||||
@sizechange="handleSizeChange"
|
||||
@currentchange="handleCurrentChange"
|
||||
:current-page="5"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="sizes, prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">直接前往</span>
|
||||
<el-pagination
|
||||
@sizechange="handleSizeChange"
|
||||
@currentchange="handleCurrentChange"
|
||||
:current-page="5"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="prev, pager, next, jumper"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">完整功能</span>
|
||||
<el-pagination
|
||||
@sizechange="handleSizeChange"
|
||||
@currentchange="handleCurrentChange"
|
||||
:current-page="5"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="400">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
@ -113,10 +107,74 @@
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
let demos = document.querySelectorAll('.source');
|
||||
let firstDemo = demos[0];
|
||||
let lastDemo = demos[demos.length - 1];
|
||||
firstDemo.classList.add('first');
|
||||
lastDemo.classList.add('last');
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.el-col {
|
||||
margin-bottom: 10px;
|
||||
.demo-pagination .first {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.demo-pagination .first .block {
|
||||
display: inline-block;
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
flex: 1;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-pagination .first .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.demo-pagination .last {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demo-pagination .last .block {
|
||||
padding: 30px 24px;
|
||||
overflow: hidden;
|
||||
border-bottom: solid 1px #EFF2F6;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-pagination .last .demonstration {
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.demo-pagination .last .demonstration + .el-pagination {
|
||||
float: right;
|
||||
width: 70%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user