Easy UI

Overlay 遮罩层 ​

该组件主要用于该组件库的弹窗场景，如模态框、抽屉、提示框、确认框等等。

该文档主要用于描述该组件的一些方法、事件和使用，方便对上述提到的组件进行二次开发。

引入 ​

js

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

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

css
ea-card {
  height: 100%;
}

ea-card::part(container) {
  display: flex;
  flex-direction: column;

  height: 100%;
}

ea-card::part(content-wrap) {
  flex: 1;
}

.ea-card-footer {
  text-align: right;
}

基本用法 ​

ea-overlay 提供了一个基础的弹出层，可以通过 show() / hide() 来控制显示与隐藏。

message

Cancel Confirm
open
html
<div class="demo">
  <ea-overlay id="basicOverlay">
    <ea-card header="title">
      <p>message</p>
      <section class="ea-card-footer" slot="footer">
        <ea-button id="basicOverlayCancelButton">Cancel</ea-button>
        <ea-button id="basicOverlayConfirmButton" type="primary">
          Confirm
        </ea-button>
      </section>
    </ea-card>
  </ea-overlay>
  <ea-button id="basicOverlayOpenButton" type="primary">open</ea-button>
</div>
js
const basicExample = {
  overlay: document.querySelector("#basicOverlay"),
  openButton: document.querySelector("#basicOverlayOpenButton"),

  confirmButton: document.querySelector("#basicOverlayConfirmButton"),
  cancelButton: document.querySelector("#basicOverlayCancelButton"),

  show() {
    this.overlay.show();
  },

  hide() {
    this.overlay.hide();
  },

  init() {
    this.openButton.addEventListener("click", () => {
      this.overlay.show();
    });

    this.confirmButton.addEventListener("click", () => {
      console.log("confirm");
      this.overlay.hide();
    });

    this.cancelButton.addEventListener("click", () => {
      console.log("cancel");
      this.overlay.hide();
    });
  },
};
basicExample.init();

模态效果 ​

通过设置 modal 控制是否启用模态效果。

message

Cancel Confirm
open
查看代码
html
<div class="demo">
  <ea-overlay id="modalOverlay" modal="false">
    <ea-card header="title">
      <p>message</p>
      <section class="ea-card-footer" slot="footer">
        <ea-button id="modalOverlayCancelButton">Cancel</ea-button>
        <ea-button id="modalOverlayConfirmButton" type="primary">
          Confirm
        </ea-button>
      </section>
    </ea-card>
  </ea-overlay>
  <ea-button id="modalOverlayOpenButton" type="primary">open</ea-button>
</div>

关闭前触发 ​

关闭前触发，可以拦截关闭，需调用 e.detail.done() 才能完成关闭。需要设置before-close属性。

TIP

< 手动调用 overlay.hide() > + < 设置 close-on-click-modal="false" >可达到同样的效果。

This Overlay will be hidden 2000 milliseconds after clicking on the mask layer

open
查看代码
html
<div class="demo">
  <ea-overlay id="beforeCloseOverlay" before-close>
    <ea-card header="title">
      <p>
        This Overlay will be hidden 2000 milliseconds after clicking on the mask
        layer
      </p>
    </ea-card>
  </ea-overlay>
  <ea-button id="beforeCloseOverlayOpenButton" type="primary">open</ea-button>
</div>

Overlay Attributes API ​

Main API ​

参数说明类型可选值默认值
status控制 Overlay 显隐的属性boolean—false
modal是否显示遮罩层。boolean—true
before-close关闭前触发，可以拦截关闭。boolean—false
close-on-click-modal点击遮罩层是否关闭。boolean—true

CSS API ​

参数说明类型可选值默认值
z-indexMDN：z-indexString—1000
background-colorMDN：background-colorString—rgba(0, 0, 0, 0.4)
content-width默认插槽的宽度String—50%
content-height默认插槽的高度String—50%
content-left默认插槽的 left 定位String—50%
content-top默认插槽的 top 定位String—50%
content-translate-x默认插槽的 translate-x 偏移量String—-50%
content-translate-y默认插槽的 translate-y 偏移量String—-50%
content-transform默认插槽的 transform 属性String—translate(
var(--ea-overlay-content-translate-x),
var(--ea-overlay-content-translate-y))

CSS Part ​

Part ​

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

名称说明
containeroverlay 外层容器
maskoverlay 遮罩层
contentoverlay 内容容器

CSS Variables ​

等同于 CSS API

css
ea-overlay {
  --ea-overlay-z-index: 1000;
  --ea-overlay-background-color: rgba(0, 0, 0, 0.4);

  --ea-overlay-content-left: 50%;
  --ea-overlay-content-top: 50%;

  --ea-overlay-content-translate-x: calc(0% - var(--ea-overlay-content-left));
  --ea-overlay-content-translate-y: calc(0% - var(--ea-overlay-content-top));
  --ea-overlay-content-transform: translate(
    var(--ea-overlay-content-translate-x),
    var(--ea-overlay-content-translate-y)
  );

  --ea-overlay-content-width: 50%;
  --ea-overlay-content-height: 50%;
}

Events ​

事件名称说明回调参数
open开启 Overlay 时触发的事件() => void
opened开启 Overlay 的动画结束时触发() => void
close关闭 Overlay 时触发的事件() => void
closed关闭 Overlay 的动画结束时触发() => void
before-close关闭 Overlay 前触发的事件(e.detail.done: () => void) => void

Methods ​

名称详情类型
show显示 Overlay() => void
hide隐藏 Overlay() => void

Slots ​

名称描述
-Overlay 内容插槽