Skip to content

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

update icon/input-number/pagination/button/dropdown docs

parent 9b9f09ba
Hide whitespace changes
Inline Side-by-side
Showing with 231 additions and 114 deletions
examples/docs/button.md
View file @ fecc5ac1
...@@ -11,6 +11,13 @@ ...@@ -11,6 +11,13 @@
console.log(event); console.log(event);
alert('button clicked!'); alert('button clicked!');
} }
},
mounted() {
this.$nextTick(() => {
let demos = document.querySelectorAll('.source');
let thirdDemo = demos[2];
thirdDemo.classList.add('intro-block');
});
} }
} }
</script> </script>
...@@ -30,6 +37,30 @@ ...@@ -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> </style>
## Button 按钮 ## Button 按钮
...@@ -68,22 +99,24 @@ ...@@ -68,22 +99,24 @@
:::demo 朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。设置`plain`属性，它接受一个`Boolean`。注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。 :::demo 朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。设置`plain`属性，它接受一个`Boolean`。注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。
```html ```html
<el-row> <div class="block">
<el-col :span="24"> <span class="demonstration">默认显示颜色</span>
<span class="wrapper">
<el-button type="success">成功按钮</el-button> <el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button> <el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button> <el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button> <el-button type="info">信息按钮</el-button>
</el-col> </span>
</el-row> </div>
<el-row> <div class="block">
<el-col :span="24"> <span class="demonstration">hover 显示颜色</span>
<span class="wrapper">
<el-button :plain="true" type="success">成功按钮</el-button> <el-button :plain="true" type="success">成功按钮</el-button>
<el-button :plain="true" type="warning">警告按钮</el-button> <el-button :plain="true" type="warning">警告按钮</el-button>
<el-button :plain="true" type="danger">危险按钮</el-button> <el-button :plain="true" type="danger">危险按钮</el-button>
<el-button :plain="true" type="info">信息按钮</el-button> <el-button :plain="true" type="info">信息按钮</el-button>
</el-col> </span>
</el-row> </div>
``` ```
::: :::
...@@ -141,7 +174,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景 ...@@ -141,7 +174,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
```html ```html
<el-button type="primary" size="large">large</el-button> <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="small">small</el-button>
<el-button type="primary" size="mini">mini</el-button> <el-button type="primary" size="mini">mini</el-button>
``` ```
......
examples/docs/dropdown.md
View file @ fecc5ac1
...@@ -11,6 +11,24 @@ ...@@ -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> </style>
<script> <script>
...@@ -19,6 +37,14 @@ ...@@ -19,6 +37,14 @@
handleMainClick() { handleMainClick() {
alert('click main button'); 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> </script>
...@@ -33,11 +59,12 @@ ...@@ -33,11 +59,12 @@
:::demo 通过`text`属性来设置按钮文字。默认条件下，他由一个主要按钮和一个下拉按钮组成，`el-dropdown`中的主要按钮同样可以设置点击事件，只要使用`mainclick`事件即可。默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。 :::demo 通过`text`属性来设置按钮文字。默认条件下，他由一个主要按钮和一个下拉按钮组成，`el-dropdown`中的主要按钮同样可以设置点击事件，只要使用`mainclick`事件即可。默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。
```html ```html
<el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()"> <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-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>
``` ```
::: :::
...@@ -71,18 +98,24 @@ ...@@ -71,18 +98,24 @@
:::demo 在`trigger`属性设置为`click`即可。 :::demo 在`trigger`属性设置为`click`即可。
```html ```html
<el-dropdown text="主要按钮" type="primary" trigger="hover"> <div class="block">
<el-dropdown-item>选项一</el-dropdown-item> <span class="demonstration">hover 激活</span>
<el-dropdown-item>选项二</el-dropdown-item> <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> <el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown text="下拉菜单" type="primary" :icon-separate="false" trigger="click"> <el-dropdown-item>选项四</el-dropdown-item>
<el-dropdown-item>选项一</el-dropdown-item> </el-dropdown>
<el-dropdown-item>选项二</el-dropdown-item> </div>
<el-dropdown-item>选项三</el-dropdown-item> <div class="block">
<el-dropdown-item class="divider">选项四</el-dropdown-item> <span class="demonstration">click 激活</span>
</el-dropdown> <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>
``` ```
::: :::
......
examples/docs/icon.md
View file @ fecc5ac1
...@@ -10,6 +10,12 @@ ...@@ -10,6 +10,12 @@
} }
</script> </script>
<style> <style>
.source>i {
margin: 0 10px;
font-size: 1.5em;
vertical-align: middle;
}
.icon-list { .icon-list {
overflow: hidden; overflow: hidden;
list-style: none; list-style: none;
...@@ -58,7 +64,9 @@ ...@@ -58,7 +64,9 @@
:::demo :::demo
```html ```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> <el-button type="primary" icon="search">搜索</el-button>
``` ```
......
examples/docs/input-number.md
View file @ fecc5ac1
...@@ -28,8 +28,6 @@ ...@@ -28,8 +28,6 @@
### 基础用法 ### 基础用法
需要标准的数字值时可以用到 Input Number 组件，它提供了数值输入，范围控制和递增递减的步数控制等功能。
:::demo 要使用它，只需要在`el-input-number`元素中使用`v-model`绑定变量即可，变量的初始值即为默认值。 :::demo 要使用它，只需要在`el-input-number`元素中使用`v-model`绑定变量即可，变量的初始值即为默认值。
```html ```html
<template> <template>
...@@ -68,19 +66,6 @@ ...@@ -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 ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|----------|-------------- |----------|-------------------------------- |-------- | |----------|-------------- |----------|-------------------------------- |-------- |
......
examples/docs/pagination.md
View file @ fecc5ac1
...@@ -6,10 +6,21 @@ ...@@ -6,10 +6,21 @@
:::demo 设置`layout`，表示需要显示的内容，用逗号分隔，布局元素会依次显示。`prev`表示上一页，`next`为上一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示显示页码总数，`size`用于设置每页显示的页码数量。 :::demo 设置`layout`，表示需要显示的内容，用逗号分隔，布局元素会依次显示。`prev`表示上一页，`next`为上一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示显示页码总数，`size`用于设置每页显示的页码数量。
```html ```html
<el-pagination <div class="block">
layout="prev, pager, next" <span class="demonstration">页数较少时的效果</span>
:total="50"> <el-pagination
</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 @@ ...@@ -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 个。 :::demo 此例是一个完整的用例，使用了`sizechange`和`currentchange`事件来处理页码大小和当前页变动时候触发的事件。`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
```html ```html
<template> <template>
<el-row> <div class="block">
<el-col :span="24"> <span class="demonstration">显示总数</span>
<el-pagination <el-pagination
@sizechange="handleSizeChange" @sizechange="handleSizeChange"
@currentchange="handleCurrentChange" @currentchange="handleCurrentChange"
:current-page="5" :current-page="5"
:page-sizes="[100, 200, 300, 400]" :page-sizes="[100, 200, 300, 400]"
:page-size="100" :page-size="100"
layout="total, prev, pager, next" layout="total, prev, pager, next"
:total="1000"> :total="1000">
</el-pagination> </el-pagination>
</el-col> </div>
</el-row> <div class="block">
<el-row> <span class="demonstration">调整每页显示条数</span>
<el-col :span="24"> <el-pagination
<el-pagination @sizechange="handleSizeChange"
@sizechange="handleSizeChange" @currentchange="handleCurrentChange"
@currentchange="handleCurrentChange" :current-page="5"
:current-page="5" :page-sizes="[100, 200, 300, 400]"
:page-sizes="[100, 200, 300, 400]" :page-size="100"
:page-size="100" layout="sizes, prev, pager, next"
layout="sizes, prev, pager, next" :total="1000">
:total="1000"> </el-pagination>
</el-pagination> </div>
</el-col> <div class="block">
</el-row> <span class="demonstration">直接前往</span>
<el-row> <el-pagination
<el-col :span="24"> @sizechange="handleSizeChange"
<el-pagination @currentchange="handleCurrentChange"
@sizechange="handleSizeChange" :current-page="5"
@currentchange="handleCurrentChange" :page-sizes="[100, 200, 300, 400]"
:current-page="5" :page-size="100"
:page-sizes="[100, 200, 300, 400]" layout="prev, pager, next, jumper"
:page-size="100" :total="1000">
layout="prev, pager, next, jumper" </el-pagination>
:total="1000"> </div>
</el-pagination> <div class="block">
</el-col> <span class="demonstration">完整功能</span>
</el-row> <el-pagination
<el-row> @sizechange="handleSizeChange"
<el-col :span="24"> @currentchange="handleCurrentChange"
<el-pagination :current-page="5"
@sizechange="handleSizeChange" :page-sizes="[100, 200, 300, 400]"
@currentchange="handleCurrentChange" :page-size="100"
:current-page="5" layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[100, 200, 300, 400]" :total="400">
:page-size="100" </el-pagination>
layout="total, sizes, prev, pager, next, jumper" </div>
:total="1000">
</el-pagination>
</el-col>
</el-row>
</template> </template>
<script> <script>
export default { export default {
...@@ -113,10 +107,74 @@ ...@@ -113,10 +107,74 @@
</script> </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> <style>
.el-col { .demo-pagination .first {
margin-bottom: 10px; 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> </style>
......
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