Skip to content

Commit 3a3fa85

Browse files
iamkunoleksiikhr
iamkun
authored and
oleksiikhr
committed
Popconfirm: Add popconfirm component (ElemeFE#17548)
* init * init * init docs * init docs2 * init type * update test * update naming
1 parent af7c40f commit 3a3fa85

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+631
-2
lines changed

‎components.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,5 +79,6 @@
7979
"page-header": "./packages/page-header/index.js",
8080
"cascader-panel": "./packages/cascader-panel/index.js",
8181
"avatar": "./packages/avatar/index.js",
82-
"drawer": "./packages/drawer/index.js"
82+
"drawer": "./packages/drawer/index.js",
83+
"popconfirm": "./packages/popconfirm/index.js"
8384
}

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
## Popconfirm
2+
3+
A simple confirmation dialog of an element click action.
4+
5+
### Basic usage
6+
7+
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
8+
9+
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
10+
```html
11+
<template>
12+
<el-popconfirm
13+
title="Are you sure to delete this?"
14+
>
15+
<el-button slot="reference">Delete</el-button>
16+
</el-popconfirm>
17+
</template>
18+
````
19+
:::
20+
21+
### Customise
22+
You can customise Popconfirm like:
23+
:::demo
24+
```html
25+
<template>
26+
<el-popconfirm
27+
confirmButtonText='OK'
28+
cancelButtonText='No, Thanks'
29+
icon="el-icon-info"
30+
iconColor="red"
31+
title="Are you sure to delete this?"
32+
>
33+
<el-button slot="reference">Delete</el-button>
34+
</el-popconfirm>
35+
</template>
36+
```
37+
:::
38+
39+
### Attributes
40+
| Attribute | Description | Type | Accepted Values | Default |
41+
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
42+
| title | Title | String | — | — |
43+
| confirmButtonText | Confirm button text | String | — | — |
44+
| cancelButtonText | Cancel button text | String | — | — |
45+
| confirmButtonType | Confirm button type | String | — | Primary |
46+
| cancelButtonType | Cancel button type | String | — | Text |
47+
| icon | Icon | String | — | el-icon-question |
48+
| iconColor | Icon color | String | — | #f90 |
49+
| hideIcon | is hide Icon | Boolean | — | false |
50+
51+
### Slot
52+
| Name | Description |
53+
|--- | ---|
54+
| reference | HTML element that triggers Popconfirm |

‎examples/docs/es/popconfirm.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
## Popconfirm
2+
3+
A simple confirmation dialog of an element click action.
4+
5+
### Basic usage
6+
7+
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
8+
9+
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
10+
```html
11+
<template>
12+
<el-popconfirm
13+
title="Are you sure to delete this?"
14+
>
15+
<el-button slot="reference">Delete</el-button>
16+
</el-popconfirm>
17+
</template>
18+
````
19+
:::
20+
21+
### Customise
22+
You can customise Popconfirm like:
23+
:::demo
24+
```html
25+
<template>
26+
<el-popconfirm
27+
confirmButtonText='OK'
28+
cancelButtonText='No, Thanks'
29+
icon="el-icon-info"
30+
iconColor="red"
31+
title="Are you sure to delete this?"
32+
>
33+
<el-button slot="reference">Delete</el-button>
34+
</el-popconfirm>
35+
</template>
36+
```
37+
:::
38+
39+
### Attributes
40+
| Attribute | Description | Type | Accepted Values | Default |
41+
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
42+
| title | Title | String | — | — |
43+
| confirmButtonText | Confirm button text | String | — | — |
44+
| cancelButtonText | Cancel button text | String | — | — |
45+
| confirmButtonType | Confirm button type | String | — | Primary |
46+
| cancelButtonType | Cancel button type | String | — | Text |
47+
| icon | Icon | String | — | el-icon-question |
48+
| iconColor | Icon color | String | — | #f90 |
49+
| hideIcon | is hide Icon | Boolean | — | false |
50+
51+
### Slot
52+
| Name | Description |
53+
|--- | ---|
54+
| reference | HTML element that triggers Popconfirm |

‎examples/docs/fr-FR/popconfirm.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
## Popconfirm
2+
3+
A simple confirmation dialog of an element click action.
4+
5+
### Basic usage
6+
7+
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
8+
9+
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
10+
```html
11+
<template>
12+
<el-popconfirm
13+
title="Are you sure to delete this?"
14+
>
15+
<el-button slot="reference">Delete</el-button>
16+
</el-popconfirm>
17+
</template>
18+
````
19+
:::
20+
21+
### Customise
22+
You can customise Popconfirm like:
23+
:::demo
24+
```html
25+
<template>
26+
<el-popconfirm
27+
confirmButtonText='OK'
28+
cancelButtonText='No, Thanks'
29+
icon="el-icon-info"
30+
iconColor="red"
31+
title="Are you sure to delete this?"
32+
>
33+
<el-button slot="reference">Delete</el-button>
34+
</el-popconfirm>
35+
</template>
36+
```
37+
:::
38+
39+
### Attributes
40+
| Attribute | Description | Type | Accepted Values | Default |
41+
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
42+
| title | Title | String | — | — |
43+
| confirmButtonText | Confirm button text | String | — | — |
44+
| cancelButtonText | Cancel button text | String | — | — |
45+
| confirmButtonType | Confirm button type | String | — | Primary |
46+
| cancelButtonType | Cancel button type | String | — | Text |
47+
| icon | Icon | String | — | el-icon-question |
48+
| iconColor | Icon color | String | — | #f90 |
49+
| hideIcon | is hide Icon | Boolean | — | false |
50+
51+
### Slot
52+
| Name | Description |
53+
|--- | ---|
54+
| reference | HTML element that triggers Popconfirm |

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
## Popconfirm 气泡确认框
2+
3+
点击元素，弹出气泡确认框。
4+
5+
### 基础用法
6+
7+
Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考 Popover 的文档，在此文档中不做详尽解释。
8+
:::demo 在 Popconfirm 中，只有 `title` 属性可用，`content` 属性不会被展示。
9+
```html
10+
<template>
11+
<el-popconfirm
12+
title="这是一段内容确定删除吗？"
13+
>
14+
<el-button slot="reference">删除</el-button>
15+
</el-popconfirm>
16+
</template>
17+
````
18+
:::
19+
20+
### 自定义
21+
22+
可以在 Popconfirm 中自定义内容。
23+
:::demo
24+
```html
25+
<template>
26+
<el-popconfirm
27+
confirmButtonText='好的'
28+
cancelButtonText='不用了'
29+
icon="el-icon-info"
30+
iconColor="red"
31+
title="这是一段内容确定删除吗？"
32+
>
33+
<el-button slot="reference">删除</el-button>
34+
</el-popconfirm>
35+
</template>
36+
```
37+
:::
38+
39+
### Attributes
40+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
41+
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
42+
| title | 标题 | String | — | — |
43+
| confirmButtonText | 确认按钮文字 | String | — | — |
44+
| cancelButtonText | 取消按钮文字 | String | — | — |
45+
| confirmButtonType | 确认按钮类型 | String | — | Primary |
46+
| cancelButtonType | 取消按钮类型 | String | — | Text |
47+
| icon | Icon | String | — | el-icon-question |
48+
| iconColor | Icon 颜色 | String | — | #f90 |
49+
| hideIcon | 是否隐藏 Icon | Boolean | — | false |
50+
51+
### Slot
52+
| 参数 | 说明 |
53+
|--- | ---|
54+
| reference | 触发 Popconfirm 显示的 HTML 元素 |

‎examples/nav.config.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,10 @@
248248
"path": "/popover",
249249
"title": "Popover 弹出框"
250250
},
251+
{
252+
"path": "/popconfirm",
253+
"title": "Popconfirm 气泡确认框"
254+
},
251255
{
252256
"path": "/card",
253257
"title": "Card 卡片"
@@ -538,6 +542,10 @@
538542
"path": "/popover",
539543
"title": "Popover"
540544
},
545+
{
546+
"path": "/popconfirm",
547+
"title": "Popconfirm"
548+
},
541549
{
542550
"path": "/card",
543551
"title": "Card"
@@ -832,6 +840,10 @@
832840
"path": "/popover",
833841
"title": "Popover"
834842
},
843+
{
844+
"path": "/popconfirm",
845+
"title": "Popconfirm"
846+
},
835847
{
836848
"path": "/card",
837849
"title": "Card"
@@ -1126,6 +1138,10 @@
11261138
"path": "/popover",
11271139
"title": "Popover"
11281140
},
1141+
{
1142+
"path": "/popconfirm",
1143+
"title": "Popconfirm"
1144+
},
11291145
{
11301146
"path": "/card",
11311147
"title": "Card"

‎packages/popconfirm/index.js

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

‎packages/popconfirm/src/main.vue

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<template>
2+
<el-popover
3+
v-bind="$attrs"
4+
v-model="visible"
5+
trigger="click"
6+
>
7+
<div class="el-popconfirm">
8+
<p class="el-popconfirm__main">
9+
<i
10+
v-if="!hideIcon"
11+
:class="icon"
12+
class="el-popconfirm__icon"
13+
:style="{color: iconColor}"
14+
></i>
15+
{{title}}
16+
</p>
17+
<div class="el-popconfirm__action">
18+
<el-button
19+
size="mini"
20+
:type="cancelButtonType"
21+
@click="cancel"
22+
>
23+
{{cancelButtonText}}
24+
</el-button>
25+
<el-button
26+
size="mini"
27+
:type="confirmButtonType"
28+
@click="confirm"
29+
>
30+
{{confirmButtonText}}
31+
</el-button>
32+
</div>
33+
</div>
34+
<slot name="reference" slot="reference"></slot>
35+
</el-popover>
36+
</template>
37+
38+
<script>
39+
import ElPopover from 'element-ui/packages/popover';
40+
import ElButton from 'element-ui/packages/button';
41+
import {t} from 'element-ui/src/locale';
42+
43+
export default {
44+
name: 'ElPopconfirm',
45+
props: {
46+
title: {
47+
type: String
48+
},
49+
confirmButtonText: {
50+
type: String,
51+
default: t('el.popconfirm.confirmButtonText')
52+
},
53+
cancelButtonText: {
54+
type: String,
55+
default: t('el.popconfirm.cancelButtonText')
56+
},
57+
confirmButtonType: {
58+
type: String,
59+
default: 'primary'
60+
},
61+
cancelButtonType: {
62+
type: String,
63+
default: 'text'
64+
},
65+
icon: {
66+
type: String,
67+
default: 'el-icon-question'
68+
},
69+
iconColor: {
70+
type: String,
71+
default: '#f90'
72+
},
73+
hideIcon: {
74+
type: Boolean,
75+
default: false
76+
}
77+
},
78+
components: {
79+
ElPopover,
80+
ElButton
81+
},
82+
data() {
83+
return {
84+
visible: false
85+
};
86+
},
87+
methods: {
88+
confirm() {
89+
this.visible = false;
90+
this.$emit('onConfirm');
91+
},
92+
cancel() {
93+
this.visible = false;
94+
this.$emit('onCancel');
95+
}
96+
}
97+
};
98+
</script>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,3 +77,4 @@
7777
@import "./cascader-panel.scss";
7878
@import "./avatar.scss";
7979
@import "./drawer.scss";
80+
@import "./popconfirm.scss";

0 commit comments

Comments
 (0)