Easy UI

Appearance

Popconfirm 气泡确认框 ​

点击某个元素弹出一个简单的气泡确认框。

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/dist/components/ea-popconfirm.js";
</script>
js
import "easy-component-ui/ea-popconfirm";

自定义样式 ​

移步到 CSS Part。

展示位置 ​

Popconfirm 提供 9 种展示位置。

使用 heading 属性来设置点击参考元素时显示的信息。由 placement 属性决定 Popconfirm 的位置。该属性值格式为：[方向]-[对齐位置]，可供选择的四个方向分别是 top、left、right、bottom，可供选择的三种对齐方式分别是 start、end、null，默认的对齐方式为 null。以 placement="left-end" 为例，气泡确认框会显示在悬停元素的左侧，且提示信息的底部与悬停元素的底部对齐。

top-starttoptop-endleft-startright-startleftrightleft-endright-endbottom-startbottombottom-end
查看代码
html
<div id="referenceSection" class="demo">
  <ea-row justify="center">
    <ea-col span="6">
      <ea-popconfirm heading="Top Left prompts info" placement="top-start">
        <ea-button variant="primary" slot="reference">top-start</ea-button>
      </ea-popconfirm>
    </ea-col>
    <ea-col span="6">
      <ea-popconfirm heading="Top Center prompts info" placement="top">
        <ea-button variant="primary" slot="reference">top</ea-button>
      </ea-popconfirm>
    </ea-col>
    <ea-col span="6">
      <ea-popconfirm heading="Top Right prompts info" placement="top-end">
        <ea-button variant="primary" slot="reference">top-end</ea-button>
      </ea-popconfirm>
    </ea-col>
  </ea-row>
  <ea-row justify="space-between">
    <ea-col span="6">
      <ea-popconfirm heading="Left Top prompts info" placement="left-start">
        <ea-button variant="primary" slot="reference">left-start</ea-button>
      </ea-popconfirm>
    </ea-col>
    <ea-col span="6">
      <ea-popconfirm heading="Right Top prompts info" placement="right-start">
        <ea-button variant="primary" slot="reference">right-start</ea-button>
      </ea-popconfirm>
    </ea-col>
  </ea-row>
  <ea-row justify="space-between">
    <ea-col span="6">
      <ea-popconfirm heading="Left Center prompts info" placement="left">
        <ea-button variant="primary" slot="reference">left</ea-button>
      </ea-popconfirm>
    </ea-col>
    <ea-col span="6">
      <ea-popconfirm heading="Right Center prompts info" placement="right">
        <ea-button variant="primary" slot="reference">right</ea-button>
      </ea-popconfirm>
    </ea-col>
  </ea-row>
  <ea-row justify="space-between">
    <ea-col span="6">
      <ea-popconfirm heading="Left Bottom prompts info" placement="left-end">
        <ea-button variant="primary" slot="reference">left-end</ea-button>
      </ea-popconfirm>
    </ea-col>
    <ea-col span="6">
      <ea-popconfirm heading="Right Bottom prompts info" placement="right-end">
        <ea-button variant="primary" slot="reference">right-end</ea-button>
      </ea-popconfirm>
    </ea-col>
  </ea-row>
  <ea-row justify="center">
    <ea-col span="6">
      <ea-popconfirm
        heading="Bottom Left prompts info"
        placement="bottom-start"
      >
        <ea-button variant="primary" slot="reference">bottom-start</ea-button>
      </ea-popconfirm>
    </ea-col>
    <ea-col span="6">
      <ea-popconfirm heading="Bottom Center prompts info" placement="bottom">
        <ea-button variant="primary" slot="reference">bottom</ea-button>
      </ea-popconfirm>
    </ea-col>
    <ea-col span="6">
      <ea-popconfirm heading="Bottom Right prompts info" placement="bottom-end">
        <ea-button variant="primary" slot="reference">bottom-end</ea-button>
      </ea-popconfirm>
    </ea-col>
  </ea-row>
</div>

基础用法 ​

Popconfirm 是在 EaPopover 基础上开发出来的。因此对于重复属性，请参考 Popper 的文档，在此文档中不做详尽解释。

在 Popconfirm 中，只有 heading 属性可用，content 属性会被忽略。

Delete
查看代码
html
<div id="triggerSection" class="demo">
  <ea-popconfirm
    heading="Are you sure to delete this?"
    confirm-button-text="Yes"
    cancel-button-text="No"
  >
    <ea-button slot="reference">Delete</ea-button>
  </ea-popconfirm>
</div>

自定义弹出框的内容 ​

可以在 Popconfirm 中自定义内容。

Delete
No!Yes?
查看代码
html
<div id="scalableSection" class="demo">
  <ea-popconfirm
    id="customizedPopconfirm"
    placement="right"
    width="220"
    icon="circle-info"
    icon-color="#626AEF"
    heading="Are you sure to delete this?"
  >
    <ea-button slot="reference">Delete</ea-button>

    <footer slot="actions">
      <ea-button id="customCancelBtn" size="small" variant="normal"
        >No!</ea-button
      >
      <ea-button id="customConfirmBtn" size="small" variant="danger"
        >Yes?</ea-button
      >
    </footer>
  </ea-popconfirm>
</div>
js
const customizedPopconfirmExample = {
  el: document.querySelector("#customizedPopconfirm"),
  cancelBtn: document.querySelector("#customCancelBtn"),
  confirmBtn: document.querySelector("#customConfirmBtn"),

  init() {
    this.cancelBtn.addEventListener("click", () => {
      this.el.close();
    });

    this.confirmBtn.addEventListener("click", () => {
      this.el.close();
    });

    this.el.addEventListener("ea-confirm", e => {
      console.log("confirm");
    });

    this.el.addEventListener("ea-cancel", e => {
      console.log("cancel");
    });
  },
};
customizedPopconfirmExample.init();

Popconfirm API ​

Popconfirm Attributes ​

参数说明类型可选值默认值
heading标题string——
confirmButtonText确认按钮文字string—确定
cancelButtonText取消按钮文字string—取消
confirmButtonType确认按钮类型stringnormal | primary | success | warning | dangerprimary
cancelButtonType取消按钮类型stringnormal | primary | success | warning | dangernormal
icon自定义图标string—circle-question
iconColor确认框图标的颜色string—rgb(255, 153, 0)
hideIcon是否隐藏图标boolean—false
width宽度，单位 pxnumber—150
placement气泡的出现位置stringtop | top-start | top-end | bottom | bottom-start | bottom-end | left | left-start | left-end | right | right-start | right-endtop
showArrow是否显示箭头boolean—true
visible控制 Popconfirm 显隐boolean—false
offset气泡出现的位置偏移量string—"0 0"
flip是否在超过原 placement 视口时进行翻转boolean—true

Popconfirm CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
containerPopconfirm 外层容器
reference触发 Popconfirm 显示的 HTML 元素的父容器
originalPopconfirm 弹出内容容器
titlePopconfirm 标题容器
iconPopconfirm 的图标
title-contentPopconfirm 内容容器
footerPopconfirm 底部容器
cancel-buttonPopconfirm 取消按钮
confirm-buttonPopconfirm 确认按钮

Popconfirm CSS Custom Properties ​

属性名说明默认值
--ea-popconfirm-title-icon-color标题图标颜色rgb(255, 153, 0)
--ea-popconfirm-title-color标题文字颜色var(--grey-900)
--ea-popconfirm-title-font-size标题文字大小var(--font-size-md)
--ea-popconfirm-box-shadow容器阴影var(--box-shadow-md)
--ea-popconfirm-border-radius容器圆角var(--border-radius-sm)
--ea-popconfirm-z-index容器层级100

Popconfirm Events ​

事件名说明回调参数
ea-confirm点击确认按钮时触发—
ea-cancel点击取消按钮时触发—
ea-show开启 Popper 时触发—
ea-shown开启 Popper 的动画结束时触发—
ea-hide关闭 Popper 时触发—
ea-hidden关闭 Popper 的动画结束时触发—

Popconfirm Methods ​

方法名说明参数
open显示 Popconfirm—
close隐藏 Popconfirm—
show显示 Popper—
hide隐藏 Popper—
toggle切换 Popper 显示状态—

Popconfirm Slots ​

名称说明
reference触发 Popconfirm 显示的 HTML 元素插槽
actions页脚内容插槽