Skip to content

Commit c2b1b9d

Browse files
donaldshenlianghx-319
donaldshen
authored and
lianghx-319
committed
feat: 新增 button-group-enhance 组件 (#36)
* feat: 新增 button-group-enhance 组件 * feat: 按钮等分 * fix: 样式
1 parent 8d73e69 commit c2b1b9d

16 files changed

+322
-3
lines changed

‎components.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -98,5 +98,6 @@
9898
"input-phone": "./packages/input-phone/index.js",
9999
"input-email": "./packages/input-email/index.js",
100100
"switch-enhance": "./packages/switch-enhance/index.js",
101-
"input-url": "./packages/input-url/index.js"
101+
"input-url": "./packages/input-url/index.js",
102+
"button-group-enhance": "./packages/button-group-enhance/index.js"
102103
}

‎examples/demo-styles/button-group-enhance.scss

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.el-card .el-card__body {
2+
padding: 0;
3+
4+
.content {
5+
padding: 20px;
6+
}
7+
.el-button-group-enhance {
8+
.el-button {
9+
border-bottom: none;
10+
border-radius: 0;
11+
&:first-child {
12+
border-left: none;
13+
}
14+
&.el-dropdown__caret-button {
15+
border-right: none;
16+
}
17+
}
18+
}
19+
}

‎examples/demo-styles/index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,4 @@
4444
@import "./infinite-scroll.scss";
4545
@import "./avatar.scss";
4646
@import "./drawer.scss";
47-
47+
@import "./button-group-enhance.scss";

‎examples/docs/en-US/button-group-enhance.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
## ButtonGroupEnhance

‎examples/docs/es/button-group-enhance.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
## ButtonGroupEnhance

‎examples/docs/fr-FR/button-group-enhance.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
## ButtonGroupEnhance

‎examples/docs/zh-CN/button-group-enhance.md

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
## ElButtonGroupEnhance 可折叠按钮组
2+
3+
### 基本用法
4+
5+
可折叠的按钮组，常用于卡片底部放置聚合操作。
6+
7+
:::demo
8+
9+
```html
10+
<template>
11+
<el-row :gutter="15">
12+
<el-col :span="10">
13+
<el-button-group-enhance
14+
:buttons="buttons()"
15+
type="primary"
16+
:collapse-at="3"
17+
/>
18+
<el-button-group-enhance
19+
style="margin-top: 15px"
20+
:buttons="buttons()"
21+
:collapse-at="3"
22+
/>
23+
</el-col>
24+
<el-col :span="10">
25+
<el-card shadow="hover">
26+
<div class="content">
27+
activate: {{activate}}
28+
</div>
29+
<el-button-group-enhance
30+
:buttons="buttons()"
31+
:collapse-at="3"
32+
/>
33+
</el-card>
34+
<el-card shadow="hover" style="margin-top: 15px">
35+
<div class="content">
36+
activate: {{activate}}
37+
</div>
38+
<el-button-group-enhance
39+
:buttons="buttons()"
40+
type="primary"
41+
:collapse-at="3"
42+
/>
43+
</el-card>
44+
</el-col>
45+
</el-row>
46+
</template>
47+
48+
<script>
49+
export default {
50+
data() {
51+
return {
52+
activate: true,
53+
buttons: () => [
54+
{
55+
text: '查看应用信息',
56+
click: () => {
57+
return new Promise(r => setTimeout(r, 2000))
58+
},
59+
},
60+
{
61+
text: '开发者信息',
62+
},
63+
{
64+
text: `${this.activate ? '禁' : '启'}用应用`,
65+
click: () => {
66+
this.activate = !this.activate
67+
},
68+
},
69+
{
70+
text: '删除应用',
71+
show: !this.activate
72+
},
73+
],
74+
}
75+
}
76+
}
77+
</script>
78+
<style lang="scss">
79+
.el-card .el-card__body {
80+
padding: 0;
81+
82+
.content {
83+
padding: 20px;
84+
}
85+
.el-button-group-enhance {
86+
.el-button {
87+
border-bottom: none;
88+
border-radius: 0;
89+
&:first-child {
90+
border-left: none;
91+
}
92+
&.el-dropdown__caret-button {
93+
border-right: none;
94+
}
95+
}
96+
}
97+
}
98+
</style>
99+
```
100+
:::
101+
102+
### Attributes
103+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
104+
|---------- |-------- |---------- |------------- |-------- |
105+
| buttons | 按钮配置列表 | array | — | [] |
106+
| buttons[0] | el-button 的所有属性 | object | — | — |
107+
| buttons[0].text | 按钮文案 | string | — | — |
108+
| buttons[0].click | 点击按钮触发的操作 | function | — | — |
109+
| collapseAt | 从第几个按钮开始折叠 | number | — | 2 |
110+
| moreText | 折叠按钮的文案 | string | — | 更多 |
111+
| size | 尺寸 | string | mini /small / median | small |
112+
| type | 类型 | string | primary / success / warning / danger / info / text | default |

‎examples/nav.config.json

+16
Original file line numberDiff line numberDiff line change
@@ -375,6 +375,10 @@
375375
{
376376
"path": "/switch-enhance",
377377
"title": "SwitchEnhance 开关增强"
378+
},
379+
{
380+
"path": "/button-group-enhance",
381+
"title": "ButtonGroupEnhance 可折叠按钮组"
378382
}
379383
]
380384
}
@@ -751,6 +755,10 @@
751755
{
752756
"path": "/input-url",
753757
"title": "InputUrl"
758+
},
759+
{
760+
"path": "/button-group-enhance",
761+
"title": "ButtonGroupEnhance"
754762
}
755763
]
756764
}
@@ -1127,6 +1135,10 @@
11271135
{
11281136
"path": "/input-url",
11291137
"title": "InputUrl"
1138+
},
1139+
{
1140+
"path": "/button-group-enhance",
1141+
"title": "ButtonGroupEnhance"
11301142
}
11311143
]
11321144
}
@@ -1502,6 +1514,10 @@
15021514
{
15031515
"path": "/input-url",
15041516
"title": "InputUrl"
1517+
},
1518+
{
1519+
"path": "/button-group-enhance",
1520+
"title": "ButtonGroupEnhance"
15051521
}
15061522
]
15071523
}

‎packages/button-group-enhance/index.js

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

‎packages/button-group-enhance/src/main.vue

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<template>
2+
<el-button-group class="el-button-group-enhance">
3+
<el-loading-button
4+
v-for="(button, index) in buttonsAtFront"
5+
:key="index"
6+
:type="type"
7+
:size="size"
8+
v-bind="button"
9+
:loading-click="button.click"
10+
>{{ button.text }}</el-loading-button
11+
>
12+
<el-dropdown
13+
v-if="buttonsCollapsed.length"
14+
:size="size"
15+
placement="bottom-start"
16+
@command="handleCommand"
17+
>
18+
<el-button :type="type" :size="size" class="el-dropdown__caret-button">
19+
<slot name="more">
20+
{{ moreText }}
21+
<i class="el-icon-arrow-down el-icon--right"></i>
22+
</slot>
23+
</el-button>
24+
<el-dropdown-menu slot="dropdown">
25+
<el-dropdown-item
26+
v-for="(item, key) in buttonsCollapsed"
27+
:key="key"
28+
v-bind="item"
29+
:command="key"
30+
>
31+
<slot v-bind="item" name="dropdownItem">{{ item.text }}</slot>
32+
</el-dropdown-item>
33+
</el-dropdown-menu>
34+
</el-dropdown>
35+
</el-button-group>
36+
</template>
37+
38+
<script>
39+
export default {
40+
name: 'ElButtonGroupEnhance',
41+
props: {
42+
/**
43+
* 支持所有 button 属性和以下：
44+
* text: string
45+
* show: (data) => boolean
46+
* click: (data) => Promise | undefined
47+
*/
48+
buttons: {
49+
type: Array,
50+
default: () => []
51+
},
52+
53+
// 从第 n 个按钮开始折叠
54+
collapseAt: {
55+
type: Number,
56+
default: 2,
57+
validator: v => v > 1
58+
},
59+
60+
moreText: {
61+
type: String,
62+
default: '更多'
63+
},
64+
65+
type: {
66+
type: String,
67+
default: 'default'
68+
},
69+
70+
size: {
71+
type: String,
72+
default: 'small'
73+
}
74+
},
75+
76+
computed: {
77+
buttonsDisplay: ({ buttons }) =>
78+
buttons
79+
.filter(({ show = true }) => show)
80+
.map(config => ({
81+
click() {},
82+
...config
83+
})),
84+
85+
sliceIndex() {
86+
return this.collapseAt - 1;
87+
},
88+
89+
buttonsAtFront() {
90+
return this.buttonsDisplay.slice(0, this.sliceIndex);
91+
},
92+
93+
buttonsCollapsed() {
94+
return this.buttonsDisplay.slice(this.sliceIndex);
95+
}
96+
},
97+
98+
methods: {
99+
handleCommand(index) {
100+
this.buttonsCollapsed[index].click();
101+
}
102+
}
103+
};
104+
</script>

‎packages/theme-chalk/src/button-group-enhance.scss

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@import "mixins/mixins";
2+
@import "common/var";
3+
4+
@include b(button-group-enhance) {
5+
display: flex;
6+
7+
& > .el-button {
8+
flex: 1 0 0;
9+
padding-left: 0;
10+
padding-right: 0;
11+
}
12+
13+
.el-dropdown {
14+
flex: 1 0 0;
15+
.el-dropdown__caret-button {
16+
width: 100%;
17+
border-top-left-radius: 0;
18+
border-bottom-left-radius: 0;
19+
&::before {
20+
top: 0;
21+
bottom: 0;
22+
}
23+
&.el-button--default::before {
24+
background-color: #DCDEE6;
25+
}
26+
}
27+
}
28+
}

‎packages/theme-chalk/src/index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -96,3 +96,4 @@
9696
@import "./input-email.scss";
9797
@import "./switch-enhance.scss";
9898
@import "./input-url.scss";
99+
@import "./button-group-enhance.scss";

‎src/index.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ import InputPhone from '../packages/input-phone/index.js';
100100
import InputEmail from '../packages/input-email/index.js';
101101
import SwitchEnhance from '../packages/switch-enhance/index.js';
102102
import InputUrl from '../packages/input-url/index.js';
103+
import ButtonGroupEnhance from '../packages/button-group-enhance/index.js';
103104
import locale from 'element-ui/src/locale';
104105
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
105106

@@ -198,6 +199,7 @@ const components = [
198199
InputEmail,
199200
SwitchEnhance,
200201
InputUrl,
202+
ButtonGroupEnhance,
201203
CollapseTransition
202204
];
203205

@@ -339,5 +341,6 @@ export default {
339341
InputPhone,
340342
InputEmail,
341343
SwitchEnhance,
342-
InputUrl
344+
InputUrl,
345+
ButtonGroupEnhance
343346
};

‎test/unit/specs/button-group-enhance.spec.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { createTest, destroyVM } from '../util';
2+
import ButtonGroupEnhance from 'packages/button-group-enhance';
3+
4+
describe('ButtonGroupEnhance', () => {
5+
let vm;
6+
afterEach(() => {
7+
destroyVM(vm);
8+
});
9+
10+
it('create', () => {
11+
vm = createTest(ButtonGroupEnhance, true);
12+
expect(vm.$el).to.exist;
13+
});
14+
});
15+

‎types/button-group-enhance.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { ElementUIComponent } from './component'
2+
3+
/** ButtonGroupEnhance Component */
4+
export declare class ElButtonGroupEnhance extends ElementUIComponent {
5+
}

0 commit comments

Comments
 (0)