Skip to content

Commit 46295df

Browse files
baiyaaaaaLeopoldthecoder
baiyaaaaa
authored and
Leopoldthecoder
committed
add collapse
1 parent f953539 commit 46295df

File tree

17 files changed

+711
-2
lines changed

17 files changed

+711
-2
lines changed

‎components.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -55,5 +55,7 @@
5555
"steps": "./packages/steps/index.js",
5656
"step": "./packages/step/index.js",
5757
"carousel": "./packages/carousel/index.js",
58-
"carousel-item": "./packages/carousel-item/index.js"
58+
"carousel-item": "./packages/carousel-item/index.js",
59+
"collapse": "./packages/collapse/index.js",
60+
"collapse-item": "./packages/collapse-item/index.js"
5961
}

‎examples/docs/en-US/collapse.md

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<script>
2+
export default {
3+
data() {
4+
return {
5+
activeNames: ['1'],
6+
activeName: '1'
7+
};
8+
},
9+
methods: {
10+
handleChange(val) {
11+
console.log(val);
12+
}
13+
}
14+
}
15+
</script>
16+
<style>
17+
.demo-collapse {
18+
.el-collapse-item__header {
19+
.header-icon {
20+
margin-left: 5px;
21+
}
22+
}
23+
}
24+
</style>
25+
26+
## Collapse
27+
28+
Use Collapse to storage content.
29+
30+
### Basic usage
31+
32+
可同时展开多个面板，面板之间不影响
33+
34+
:::demo
35+
```html
36+
<el-collapse v-model="activeNames" @change="handleChange">
37+
<el-collapse-item title="Consistency" name="1">
38+
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
39+
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
40+
</el-collapse-item>
41+
<el-collapse-item title="Feedback" name="2">
42+
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
43+
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
44+
</el-collapse-item>
45+
<el-collapse-item title="Efficiency" name="3">
46+
<div>简化流程：设计简洁直观的操作流程；</div>
47+
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
48+
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
49+
</el-collapse-item>
50+
<el-collapse-item title="Controllability" name="4">
51+
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
52+
<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
53+
</el-collapse-item>
54+
</el-collapse>
55+
<script>
56+
export default {
57+
data() {
58+
return {
59+
activeNames: ['1']
60+
};
61+
}
62+
}
63+
</script>
64+
```
65+
:::
66+
67+
### Accordion
68+
69+
At the same time only one item can be opened.
70+
71+
:::demo 通过 `accordion` 属性来设置是否以手风琴模式显示。
72+
```html
73+
<el-collapse v-model="activeName" accordion>
74+
<el-collapse-item title="Consistency" name="1">
75+
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
76+
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
77+
</el-collapse-item>
78+
<el-collapse-item title="Feedback" name="2">
79+
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
80+
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
81+
</el-collapse-item>
82+
<el-collapse-item title="Efficiency" name="3">
83+
<div>简化流程：设计简洁直观的操作流程；</div>
84+
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
85+
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
86+
</el-collapse-item>
87+
<el-collapse-item title="Controllability" name="4">
88+
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
89+
<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
90+
</el-collapse-item>
91+
</el-collapse>
92+
<script>
93+
export default {
94+
data() {
95+
return {
96+
activeName: '1'
97+
};
98+
}
99+
}
100+
</script>
101+
```
102+
:::
103+
104+
### Customize Title
105+
106+
除了可以通过 `title` 属性以外，还可以通过作用域插槽来实现自定义面板的标题内容，以实现增加图标等效果。
107+
108+
:::demo
109+
```html
110+
<el-collapse accordion>
111+
<el-collapse-item title="Consistency">
112+
<template slot="title" scope="props">
113+
{{props.title}}<i class="header-icon el-icon-information"></i>
114+
</template>
115+
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
116+
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
117+
</el-collapse-item>
118+
<el-collapse-item title="Feedback">
119+
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
120+
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
121+
</el-collapse-item>
122+
<el-collapse-item title="Efficiency">
123+
<div>简化流程：设计简洁直观的操作流程；</div>
124+
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
125+
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
126+
</el-collapse-item>
127+
<el-collapse-item title="Controllability">
128+
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
129+
<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
130+
</el-collapse-item>
131+
</el-collapse>
132+
```
133+
:::
134+
135+
### Collapse Attributes
136+
| Attribute | Description | Type | Accepted Values | Default |
137+
|---------- |-------------- |---------- |-------------------------------- |-------- |
138+
| accordion | whether is accordion mode | boolean | — | false |
139+
| value | the active item's name | string/array | — | — |
140+
141+
### Collapse Events
142+
| Event Name | Description | Parameters |
143+
|---------|---------|---------|
144+
| change | trigger when the active names change | (activeNames: array) |
145+
146+
### Collapse Item Attributes
147+
| Attribute | Description | Type | Accepted Values | Default |
148+
|---------- |-------------- |---------- |-------------------------------- |-------- |
149+
| name | unique identifier | string/number | — | — |
150+
| title | title | string | — | — |

‎examples/docs/zh-CN/collapse.md

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<script>
2+
export default {
3+
data() {
4+
return {
5+
activeNames: ['1'],
6+
activeName: '1'
7+
};
8+
},
9+
methods: {
10+
handleChange(val) {
11+
console.log(val);
12+
}
13+
}
14+
}
15+
</script>
16+
<style>
17+
.demo-collapse {
18+
.el-collapse-item__header {
19+
.header-icon {
20+
margin-left: 5px;
21+
}
22+
}
23+
}
24+
</style>
25+
26+
## Collapse 折叠面板
27+
28+
通过折叠面板收纳内容区域
29+
30+
### 基础用法
31+
32+
可同时展开多个面板，面板之间不影响
33+
34+
:::demo
35+
```html
36+
<el-collapse v-model="activeNames" @change="handleChange">
37+
<el-collapse-item title="一致性 Consistency" name="1">
38+
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
39+
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
40+
</el-collapse-item>
41+
<el-collapse-item title="反馈 Feedback" name="2">
42+
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
43+
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
44+
</el-collapse-item>
45+
<el-collapse-item title="效率 Efficiency" name="3">
46+
<div>简化流程：设计简洁直观的操作流程；</div>
47+
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
48+
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
49+
</el-collapse-item>
50+
<el-collapse-item title="可控 Controllability" name="4">
51+
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
52+
<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
53+
</el-collapse-item>
54+
</el-collapse>
55+
<script>
56+
export default {
57+
data() {
58+
return {
59+
activeNames: ['1']
60+
};
61+
}
62+
}
63+
</script>
64+
```
65+
:::
66+
67+
### 手风琴效果
68+
69+
每次只能展开一个面板
70+
71+
:::demo 通过 `accordion` 属性来设置是否以手风琴模式显示。
72+
```html
73+
<el-collapse v-model="activeName" accordion>
74+
<el-collapse-item title="一致性 Consistency" name="1">
75+
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
76+
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
77+
</el-collapse-item>
78+
<el-collapse-item title="反馈 Feedback" name="2">
79+
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
80+
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
81+
</el-collapse-item>
82+
<el-collapse-item title="效率 Efficiency" name="3">
83+
<div>简化流程：设计简洁直观的操作流程；</div>
84+
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
85+
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
86+
</el-collapse-item>
87+
<el-collapse-item title="可控 Controllability" name="4">
88+
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
89+
<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
90+
</el-collapse-item>
91+
</el-collapse>
92+
<script>
93+
export default {
94+
data() {
95+
return {
96+
activeName: '1'
97+
};
98+
}
99+
}
100+
</script>
101+
```
102+
:::
103+
104+
### 自定义面板标题
105+
106+
除了可以通过 `title` 属性以外，还可以通过作用域插槽来实现自定义面板的标题内容，以实现增加图标等效果。
107+
108+
:::demo
109+
```html
110+
<el-collapse accordion>
111+
<el-collapse-item title="一致性 Consistency">
112+
<template slot="title" scope="props">
113+
{{props.title}}<i class="header-icon el-icon-information"></i>
114+
</template>
115+
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
116+
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
117+
</el-collapse-item>
118+
<el-collapse-item title="反馈 Feedback">
119+
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
120+
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
121+
</el-collapse-item>
122+
<el-collapse-item title="效率 Efficiency">
123+
<div>简化流程：设计简洁直观的操作流程；</div>
124+
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
125+
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
126+
</el-collapse-item>
127+
<el-collapse-item title="可控 Controllability">
128+
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
129+
<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
130+
</el-collapse-item>
131+
</el-collapse>
132+
```
133+
:::
134+
135+
### Collapse Attributes
136+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
137+
|---------- |-------------- |---------- |-------------------------------- |-------- |
138+
| accordion | 是否手风琴模式 | boolean | — | false |
139+
| value | 当前激活的面板 | string/array | — | — |
140+
141+
### Collapse Events
142+
| 事件名称 | 说明 | 回调参数 |
143+
|---------|---------|---------|
144+
| change | 当前激活面板改变时触发 | (activeNames: array) |
145+
146+
### Collapse Item Attributes
147+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
148+
|---------- |-------------- |---------- |-------------------------------- |-------- |
149+
| name | 唯一标志符 | string/number | — | — |
150+
| title | 面板标题 | string | — | — |

‎examples/nav.config.json

+8
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,10 @@
211211
{
212212
"path": "/carousel",
213213
"title": "Carousel 走马灯"
214+
},
215+
{
216+
"path": "/collapse",
217+
"title": "Collapse 折叠面板"
214218
}
215219
]
216220
}
@@ -429,6 +433,10 @@
429433
{
430434
"path": "/carousel",
431435
"title": "Carousel"
436+
},
437+
{
438+
"path": "/collapse",
439+
"title": "Collapse"
432440
}
433441
]
434442
}

‎packages/collapse-item/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import ElCollapseItem from '../collapse/src/collapse-item.vue';
2+
3+
/* istanbul ignore next */
4+
ElCollapseItem.install = function(Vue) {
5+
Vue.component(ElCollapseItem.name, ElCollapseItem);
6+
};
7+
8+
export default ElCollapseItem;

‎packages/collapse/_index.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import ElCollapse from './src/collapse';
2+
import ElCollapseItem from './src/collapse-item.vue';
3+
4+
/* istanbul ignore next */
5+
export default function install(Vue) {
6+
Vue.component(ElCollapseItem.name, ElCollapseItem);
7+
Vue.component(ElCollapse.name, ElCollapse);
8+
};
9+
10+
export {
11+
ElCollapse,
12+
ElCollapseItem
13+
};

‎packages/collapse/cooking.conf.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var cooking = require('cooking');
2+
var path = require('path');
3+
var config = require('../../build/config');
4+
5+
cooking.set({
6+
entry: {
7+
index: path.join(__dirname, '_index.js')
8+
},
9+
dist: path.join(__dirname, 'lib'),
10+
template: false,
11+
format: 'umd',
12+
moduleName: 'ElCollapse',
13+
extends: ['vue2'],
14+
alias: config.alias,
15+
externals: { vue: config.vue }
16+
});
17+
18+
module.exports = cooking.resolve();

‎packages/collapse/index.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import ElCollapse from './src/collapse';
2+
3+
/* istanbul ignore next */
4+
ElCollapse.install = function(Vue) {
5+
Vue.component(ElCollapse.name, ElCollapse);
6+
};
7+
8+
export default ElCollapse;
9+

0 commit comments

Comments
 (0)