github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

add cascader en docs

pull/2559/head
baiyaaaaa 2017-01-22 11:32:05 +08:00
parent 5c01a65423
commit 7024daab3f
4 changed files with 509 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

488
examples/docs/en-US/cascader.md
View File

@ -1 +1,487 @@
## cascader <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',
}],
}],
}],
optionsWithDisabled: [{
value: 'zhejiang',
label: 'Zhejiang',
disabled: true,
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',
}],
}],
}],
selectedOptions: [],
selectedOptions2: ['jiangsu', 'nanjing', 'zhonghuamen']
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>
<style>
.demo-cascader {
.el-cascader {
width: 222px;
}
}
.demo-cascader-size {
.el-cascader {
vertical-align: top;
margin-right: 15px;
}
}
</style>
## Cascader
It's used to select from a set of associated data set. Such as province/city/district, company level, and categories.
### Basic usage
:::demo
```html
<el-cascader
placeholder="Please select"
:options="options"
v-model="selectedOptions"
@change="handleChange"
></el-cascader>
<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',
}],
}],
}],
selectedOptions: []
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>
```
:::
### Disabled option
:::demo
```html
<el-cascader
placeholder="Please select"
:options="optionsWithDisabled"
></el-cascader>
<script>
module.exports = {
data() {
return {
optionsWithDisabled: [{
value: 'zhejiang',
label: 'Zhejiang',
disabled: true,
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>
```
:::
### Default Value
:::demo default value is assigned by an array type value.
```html
<el-cascader
placeholder="Please select"
:options="options"
v-model="selectedOptions2"
></el-cascader>
<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',
}],
}],
}],
selectedOptions2: ['jiangsu', 'nanjing', 'zhonghuamen']
};
}
};
</script>
```
:::
### Size
:::demo
```html
<div class="demo-cascader-size">
<el-cascader
placeholder="Please select"
:options="options"
size="large"
></el-cascader>
<el-cascader
placeholder="Please select"
:options="options"
></el-cascader>
<el-cascader
placeholder="Please select"
: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>
```
:::
### Hover to expand
Hover to expand the next level options, click to select option.
:::demo
```html
<el-cascader
placeholder="Please select"
:options="options"
expand-trigger="hover"
></el-cascader>
<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>
```
:::
### Change on select
Allow only select parent options.
:::demo
```html
<el-cascader
placeholder="Please select"
:options="options"
change-on-select
></el-cascader>
<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>
```
:::
### Search
Search and select options directly.
:::demo
```html
<el-cascader
placeholder="Please select"
:options="options"
show-search
></el-cascader>
<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>
```
:::
### Attributes
| Attribute | Description | Type | Options | Default|
|---------- |-------------------- |---------|------------- |-------- |
| options | data source of the options | array | — | — |
| value | selected value | array | — | — |
| popup-class | className of popup overlay | string | — | — |
| placeholder | input placeholder | string | — | — |
| disabled | 是否禁用 | boolean | — | false |
| allowClear | whether allow clear | boolean | — | false |
| expand-trigger | trigger mode of expandind the current item | string | click / hover | 'click' |
| showSearch | whether the options can be searched | boolean | — | — |
| size | size | string | large / small / mini | — |
### Events
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| change | triggers when the binding value changes | value |

4
examples/docs/zh-CN/cascader.md
View File

@ -152,7 +152,9 @@
``` ```
::: :::
### 禁用值 ### 禁用选项
通过在数据源中设置 `disabled` 字段来声明该选项时禁用的
:::demo :::demo
```html ```html

16
examples/nav.config.json
View File

@ -76,6 +76,10 @@
"path": "/select", "path": "/select",
"title": "Select 选择器" "title": "Select 选择器"
}, },
{
"path": "/cascader",
"title": "Cascader 级联选择"
},
{ {
"path": "/switch", "path": "/switch",
"title": "Switch 开关" "title": "Switch 开关"
@ -215,10 +219,6 @@
{ {
"path": "/collapse", "path": "/collapse",
"title": "Collapse 折叠面板" "title": "Collapse 折叠面板"
},
{
"path": "/cascader",
"title": "Cascader 级联选择"
} }
] ]
} }
@ -302,6 +302,10 @@
"path": "/select", "path": "/select",
"title": "Select" "title": "Select"
}, },
{
"path": "/cascader",
"title": "Cascader"
},
{ {
"path": "/switch", "path": "/switch",
"title": "Switch" "title": "Switch"
@ -441,10 +445,6 @@
{ {
"path": "/collapse", "path": "/collapse",
"title": "Collapse" "title": "Collapse"
},
{
"path": "/cascader",
"title": "Cascader"
} }
] ]
} }

13
packages/cascader/src/main.vue
View File

@ -2,10 +2,13 @@
<span <span
class="el-cascader" class="el-cascader"
:class="[ :class="[
{ 'is-opened': menuVisible }, {
'is-opened': menuVisible,
'is-disabled': disabled
},
size ? 'el-cascader--' + size : '' size ? 'el-cascader--' + size : ''
]" ]"
@click="menuVisible = !menuVisible" @click="handleClick"
@mouseenter="inputHover = true" @mouseenter="inputHover = true"
@mouseleave="inputHover = false" @mouseleave="inputHover = false"
ref="reference" ref="reference"
@ -18,6 +21,7 @@
@change="handleInputChange" @change="handleInputChange"
:validate-event="false" :validate-event="false"
:size="size" :size="size"
:disabled="disabled"
> >
<template slot="icon"> <template slot="icon">
<i <i
@ -209,6 +213,11 @@ export default {
}, },
handleClickoutside() { handleClickoutside() {
this.menuVisible = false; this.menuVisible = false;
},
handleClick() {
if (!this.disabled) {
this.menuVisible = !this.menuVisible;
}
} }
} }
}; };