Popconfirm: Add popconfirm component (ElemeFE#17548)

* init * init * init docs * init docs2 * init type * update test * update naming
cuizaiyong · Oct 31, 2019 · 2842399 · 2842399
1 parent df3562d
commit 2842399
Show file tree

Hide file tree

Showing 66 changed files with 631 additions and 2 deletions.
diff --git a/components.json b/components.json
@@ -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"
 }
diff --git a/examples/docs/en-US/popconfirm.md b/examples/docs/en-US/popconfirm.md
@@ -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 |
diff --git a/examples/docs/es/popconfirm.md b/examples/docs/es/popconfirm.md
@@ -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 |
diff --git a/examples/docs/fr-FR/popconfirm.md b/examples/docs/fr-FR/popconfirm.md
@@ -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 |
diff --git a/examples/docs/zh-CN/popconfirm.md b/examples/docs/zh-CN/popconfirm.md
@@ -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 元素 |
diff --git a/examples/nav.config.json b/examples/nav.config.json
@@ -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"

diff --git a/packages/popconfirm/index.js b/packages/popconfirm/index.js
@@ -0,0 +1,8 @@
+import Popconfirm from './src/main';
+
+/* istanbul ignore next */
+Popconfirm.install = function(Vue) {
+  Vue.component(Popconfirm.name, Popconfirm);
+};
+
+export default Popconfirm;
diff --git a/packages/popconfirm/src/main.vue b/packages/popconfirm/src/main.vue
@@ -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>
diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss
@@ -77,3 +77,4 @@
 @import "./cascader-panel.scss";
 @import "./avatar.scss";
 @import "./drawer.scss";
+@import "./popconfirm.scss";