Popconfirm: Add popconfirm component (#17548)

* init

* init

* init docs

* init docs2

* init type

* update test

* update naming
pull/17926/head
iamkun 2019-10-31 15:05:41 +08:00 committed by Zhi Cun
parent df3562d905
commit 2842399eb7
66 changed files with 631 additions and 2 deletions

View File

@ -79,5 +79,6 @@
"page-header": "./packages/page-header/index.js",
"cascader-panel": "./packages/cascader-panel/index.js",
"avatar": "./packages/avatar/index.js",
"drawer": "./packages/drawer/index.js"
"drawer": "./packages/drawer/index.js",
"popconfirm": "./packages/popconfirm/index.js"
}

View File

@ -0,0 +1,54 @@
## Popconfirm
A simple confirmation dialog of an element click action.
### Basic usage
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
```html
<template>
<el-popconfirm
title="Are you sure to delete this?"
>
<el-button slot="reference">Delete</el-button>
</el-popconfirm>
</template>
````
:::
### Customise
You can customise Popconfirm like:
:::demo
```html
<template>
<el-popconfirm
confirmButtonText='OK'
cancelButtonText='No, Thanks'
icon="el-icon-info"
iconColor="red"
title="Are you sure to delete this?"
>
<el-button slot="reference">Delete</el-button>
</el-popconfirm>
</template>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| title | Title | String | — | — |
| confirmButtonText | Confirm button text | String | — | — |
| cancelButtonText | Cancel button text | String | — | — |
| confirmButtonType | Confirm button type | String | — | Primary |
| cancelButtonType | Cancel button type | String | — | Text |
| icon | Icon | String | — | el-icon-question |
| iconColor | Icon color | String | — | #f90 |
| hideIcon | is hide Icon | Boolean | — | false |
### Slot
| Name | Description |
|--- | ---|
| reference | HTML element that triggers Popconfirm |

View File

@ -0,0 +1,54 @@
## Popconfirm
A simple confirmation dialog of an element click action.
### Basic usage
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
```html
<template>
<el-popconfirm
title="Are you sure to delete this?"
>
<el-button slot="reference">Delete</el-button>
</el-popconfirm>
</template>
````
:::
### Customise
You can customise Popconfirm like:
:::demo
```html
<template>
<el-popconfirm
confirmButtonText='OK'
cancelButtonText='No, Thanks'
icon="el-icon-info"
iconColor="red"
title="Are you sure to delete this?"
>
<el-button slot="reference">Delete</el-button>
</el-popconfirm>
</template>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| title | Title | String | — | — |
| confirmButtonText | Confirm button text | String | — | — |
| cancelButtonText | Cancel button text | String | — | — |
| confirmButtonType | Confirm button type | String | — | Primary |
| cancelButtonType | Cancel button type | String | — | Text |
| icon | Icon | String | — | el-icon-question |
| iconColor | Icon color | String | — | #f90 |
| hideIcon | is hide Icon | Boolean | — | false |
### Slot
| Name | Description |
|--- | ---|
| reference | HTML element that triggers Popconfirm |

View File

@ -0,0 +1,54 @@
## Popconfirm
A simple confirmation dialog of an element click action.
### Basic usage
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
```html
<template>
<el-popconfirm
title="Are you sure to delete this?"
>
<el-button slot="reference">Delete</el-button>
</el-popconfirm>
</template>
````
:::
### Customise
You can customise Popconfirm like:
:::demo
```html
<template>
<el-popconfirm
confirmButtonText='OK'
cancelButtonText='No, Thanks'
icon="el-icon-info"
iconColor="red"
title="Are you sure to delete this?"
>
<el-button slot="reference">Delete</el-button>
</el-popconfirm>
</template>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| title | Title | String | — | — |
| confirmButtonText | Confirm button text | String | — | — |
| cancelButtonText | Cancel button text | String | — | — |
| confirmButtonType | Confirm button type | String | — | Primary |
| cancelButtonType | Cancel button type | String | — | Text |
| icon | Icon | String | — | el-icon-question |
| iconColor | Icon color | String | — | #f90 |
| hideIcon | is hide Icon | Boolean | — | false |
### Slot
| Name | Description |
|--- | ---|
| reference | HTML element that triggers Popconfirm |

View File

@ -0,0 +1,54 @@
## Popconfirm 气泡确认框
点击元素,弹出气泡确认框。
### 基础用法
Popconfirm 的属性与 Popover 很类似,因此对于重复属性,请参考 Popover 的文档,在此文档中不做详尽解释。
:::demo 在 Popconfirm 中,只有 `title` 属性可用,`content` 属性不会被展示。
```html
<template>
<el-popconfirm
title="这是一段内容确定删除吗?"
>
<el-button slot="reference">删除</el-button>
</el-popconfirm>
</template>
````
:::
### 自定义
可以在 Popconfirm 中自定义内容。
:::demo
```html
<template>
<el-popconfirm
confirmButtonText='好的'
cancelButtonText='不用了'
icon="el-icon-info"
iconColor="red"
title="这是一段内容确定删除吗?"
>
<el-button slot="reference">删除</el-button>
</el-popconfirm>
</template>
```
:::
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| title | 标题 | String | — | — |
| confirmButtonText | 确认按钮文字 | String | — | — |
| cancelButtonText | 取消按钮文字 | String | — | — |
| confirmButtonType | 确认按钮类型 | String | — | Primary |
| cancelButtonType | 取消按钮类型 | String | — | Text |
| icon | Icon | String | — | el-icon-question |
| iconColor | Icon 颜色 | String | — | #f90 |
| hideIcon | 是否隐藏 Icon | Boolean | — | false |
### Slot
| 参数 | 说明 |
|--- | ---|
| reference | 触发 Popconfirm 显示的 HTML 元素 |

View File

@ -248,6 +248,10 @@
"path": "/popover",
"title": "Popover 弹出框"
},
{
"path": "/popconfirm",
"title": "Popconfirm 气泡确认框"
},
{
"path": "/card",
"title": "Card 卡片"
@ -538,6 +542,10 @@
"path": "/popover",
"title": "Popover"
},
{
"path": "/popconfirm",
"title": "Popconfirm"
},
{
"path": "/card",
"title": "Card"
@ -832,6 +840,10 @@
"path": "/popover",
"title": "Popover"
},
{
"path": "/popconfirm",
"title": "Popconfirm"
},
{
"path": "/card",
"title": "Card"
@ -1126,6 +1138,10 @@
"path": "/popover",
"title": "Popover"
},
{
"path": "/popconfirm",
"title": "Popconfirm"
},
{
"path": "/card",
"title": "Card"

View File

@ -0,0 +1,8 @@
import Popconfirm from './src/main';
/* istanbul ignore next */
Popconfirm.install = function(Vue) {
Vue.component(Popconfirm.name, Popconfirm);
};
export default Popconfirm;

View File

@ -0,0 +1,98 @@
<template>
<el-popover
v-bind="$attrs"
v-model="visible"
trigger="click"
>
<div class="el-popconfirm">
<p class="el-popconfirm__main">
<i
v-if="!hideIcon"
:class="icon"
class="el-popconfirm__icon"
:style="{color: iconColor}"
></i>
{{title}}
</p>
<div class="el-popconfirm__action">
<el-button
size="mini"
:type="cancelButtonType"
@click="cancel"
>
{{cancelButtonText}}
</el-button>
<el-button
size="mini"
:type="confirmButtonType"
@click="confirm"
>
{{confirmButtonText}}
</el-button>
</div>
</div>
<slot name="reference" slot="reference"></slot>
</el-popover>
</template>
<script>
import ElPopover from 'element-ui/packages/popover';
import ElButton from 'element-ui/packages/button';
import {t} from 'element-ui/src/locale';
export default {
name: 'ElPopconfirm',
props: {
title: {
type: String
},
confirmButtonText: {
type: String,
default: t('el.popconfirm.confirmButtonText')
},
cancelButtonText: {
type: String,
default: t('el.popconfirm.cancelButtonText')
},
confirmButtonType: {
type: String,
default: 'primary'
},
cancelButtonType: {
type: String,
default: 'text'
},
icon: {
type: String,
default: 'el-icon-question'
},
iconColor: {
type: String,
default: '#f90'
},
hideIcon: {
type: Boolean,
default: false
}
},
components: {
ElPopover,
ElButton
},
data() {
return {
visible: false
};
},
methods: {
confirm() {
this.visible = false;
this.$emit('onConfirm');
},
cancel() {
this.visible = false;
this.$emit('onCancel');
}
}
};
</script>

View File

@ -77,3 +77,4 @@
@import "./cascader-panel.scss";
@import "./avatar.scss";
@import "./drawer.scss";
@import "./popconfirm.scss";

View File

@ -0,0 +1,16 @@
@import "mixins/mixins";
@import "common/var";
@include b(popconfirm) {
@include e(main) {
display: flex;
align-items: center;
}
@include e(icon) {
margin-right: 5px;
}
@include e(action) {
text-align: right;
margin: 0
}
}

View File

@ -81,6 +81,7 @@ import PageHeader from '../packages/page-header/index.js';
import CascaderPanel from '../packages/cascader-panel/index.js';
import Avatar from '../packages/avatar/index.js';
import Drawer from '../packages/drawer/index.js';
import Popconfirm from '../packages/popconfirm/index.js';
import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
@ -161,6 +162,7 @@ const components = [
CascaderPanel,
Avatar,
Drawer,
Popconfirm,
CollapseTransition
];
@ -281,5 +283,6 @@ export default {
PageHeader,
CascaderPanel,
Avatar,
Drawer
Drawer,
Popconfirm
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -110,6 +110,10 @@ export default {
},
pageHeader: {
title: 'عودة'
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -110,6 +110,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -113,6 +113,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -110,6 +110,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -112,6 +112,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes',
cancelButtonText: 'No'
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Reen'
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -110,6 +110,10 @@ export default {
},
pageHeader: {
title: 'Volver'
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'بازگشت'
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -110,6 +110,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -110,6 +110,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -110,6 +110,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -110,6 +110,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Voltar'
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -113,6 +113,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -110,6 +110,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'ย้อนกลับ'
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Orqaga'
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: 'Back' // to be translated
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: '返回'
},
popconfirm: {
confirmButtonText: '确定',
cancelButtonText: '取消'
}
}
};

View File

@ -111,6 +111,10 @@ export default {
},
pageHeader: {
title: '返回'
},
popconfirm: {
confirmButtonText: 'Yes', // to be translated
cancelButtonText: 'No' // to be translated
}
}
};

View File

@ -0,0 +1,29 @@
import { createVue, destroyVM } from '../util';
describe('Popconfirm', () => {
let vm;
afterEach(() => {
destroyVM(vm);
});
describe('trigger', () => {
const createVM = () => {
return createVue(`
<div>
<el-popconfirm
ref="popover"
title="content">
<button slot="reference">trigger</button>
</el-popconfirm>
</div>
`, true);
};
it('click', () => {
vm = createVM();
vm.$el.querySelector('button').click();
document.body.click();
expect(document.body.querySelector('.el-popconfirm__action').style.display).to.equal('');
});
});
});

View File

@ -79,6 +79,7 @@ import { ElInfiniteScroll } from './infinite-scroll'
import { ElPageHeader } from './page-header'
import { ElAvatar } from './avatar'
import { ElDrawer } from './drawer'
import { ElPopconfirm } from './popconfirm'
export interface InstallationOptions {
locale: any,
@ -340,3 +341,6 @@ export class Avatar extends ElAvatar {}
/** Drawer Component */
export class Drawer extends ElDrawer {}
/** Popconfirm Component */
export class Popconfirm extends ElPopconfirm {}

29
types/popconfirm.d.ts vendored Normal file
View File

@ -0,0 +1,29 @@
import { ElementUIComponent } from './component'
import { ElPopover } from './popover'
/** Popconfirm Component */
export declare class ElPopconfirm extends ElPopover {
/** Popconfirm title */
title: string
/** Popconfirm ok text */
confirmButtonText: string
/** Popconfirm cancel text */
cancelButtonText: string
/** Popconfirm ok type */
confirmButtonType: string
/** Popconfirm cancal type */
cancelButtonType: string
/** Popconfirm icon */
icon: string
/** Popconfirm icon color */
iconColor: string
/** Popconfirm hide icon */
hideIcon: boolean
}