add size docs

pull/2559/head
baiyaaaaa 2017-01-22 11:04:36 +08:00
parent fc4fd4cd61
commit 5c01a65423
3 changed files with 88 additions and 5 deletions

View File

@ -81,6 +81,12 @@
width: 222px;
}
}
.demo-cascader-size {
.el-cascader {
vertical-align: top;
margin-right: 15px;
}
}
</style>
## 级联选择
@ -247,6 +253,67 @@
```
:::
### 尺寸
:::demo 提供三种尺寸的级联选择器
```html
<div class="demo-cascader-size">
<el-cascader
placeholder="请选择"
:options="options"
size="large"
></el-cascader>
<el-cascader
placeholder="请选择"
:options="options"
></el-cascader>
<el-cascader
placeholder="请选择"
:options="options"
size="small"
></el-cascader>
</div>
<script>
module.exports = {
data() {
return {
options: [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}, {
value: 'ningbo',
label: 'NingBo',
children: [{
value: 'jiangbei',
label: 'Jiang Bei',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}]
};
}
};
</script>
```
:::
### 移入展开
在鼠标移入时就展开下级菜单,完成选择仍需要进行点击。

View File

@ -1,9 +1,10 @@
<template>
<span
class="el-cascader"
:class="{
'is-opened': menuVisible
}"
:class="[
{ 'is-opened': menuVisible },
size ? 'el-cascader--' + size : ''
]"
@click="menuVisible = !menuVisible"
@mouseenter="inputHover = true"
@mouseleave="inputHover = false"

View File

@ -33,8 +33,8 @@
position: absolute;
left: 0;
top: 0;
height: var(--input-height);
line-height: @height;
height: 100%;
line-height: 34px;
padding: 0 15px 0 10px;
color: var(--input-color);
width: 100%;
@ -44,6 +44,21 @@
box-sizing: border-box;
cursor: pointer;
}
@m large {
font-size: var(--input-large-font-size);
.el-cascader__label {
line-height: calc(var(--input-large-height) - 2);
}
}
@m small {
font-size: var(--input-small-font-size);
.el-cascader__label {
line-height: calc(var(--input-small-height) - 2);
}
}
}
@b cascader-menus {