mirror of https://github.com/ElemeFE/element
add size docs
parent
fc4fd4cd61
commit
5c01a65423
|
@ -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>
|
||||
```
|
||||
:::
|
||||
|
||||
### 移入展开
|
||||
|
||||
在鼠标移入时就展开下级菜单,完成选择仍需要进行点击。
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue