Easy UI

Appearance

Overlay 遮罩层 ​

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

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

引入 ​

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

自定义样式 ​

移步到 CSS Part。

查看代码
css
ea-card {
  height: 100%;
}

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

  height: 100%;
}

ea-card::part(content) {
  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" variant="primary">
          Confirm
        </ea-button>
      </section>
    </ea-card>
  </ea-overlay>
  <ea-button id="basicOverlayOpenButton" variant="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" variant="primary">
          Confirm
        </ea-button>
      </section>
    </ea-card>
  </ea-overlay>
  <ea-button id="modalOverlayOpenButton" variant="primary">open</ea-button>
</div>

关闭前触发 ​

关闭前触发，可以拦截关闭，需调用 done() 回调函数才能完成关闭。调用 done(true) 可以取消关闭。通过设置 beforeClose 属性为一个函数来实现。

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" close-on-click-modal>
    <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" variant="primary">open</ea-button>
</div>
js
const overlay = document.querySelector("#beforeCloseOverlay");

overlay.beforeClose = async done => {
  console.log("before-close");
  await new Promise(resolve => setTimeout(resolve, 2000));
  done();
};

Overlay API ​

Overlay Attributes ​

参数说明类型可选值默认值
visible是否可见Boolean—false
modal是否显示遮罩层Boolean—true
close-on-click-modal点击遮罩层是否关闭Boolean—true
close-on-press-escape按 ESC 键是否关闭Boolean—true
append-to-body是否追加到 bodyBoolean—false
append-to追加到指定选择器容器String—body
z-indexz-index 层级String—''
background-color遮罩层背景色String—''
content-width内容宽度String—''
content-max-width内容最大宽度String—''
content-height内容高度String—''
beforeClose prop关闭前触发的回调函数，接收 done 回调作为参数。done() 确认关闭，done(true) 取消关闭Function—null

Overlay CSS Part ​

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

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

Overlay CSS Variables ​

css
ea-overlay {
  --ea-overlay-z-index: 3000;
  --ea-overlay-background-color: rgba(0, 0, 0, 0.4);
  --ea-overlay-content-width: 50%;
  --ea-overlay-content-max-width: none;
  --ea-overlay-content-height: 50%;
  --ea-overlay-transition: var(--transition-normal);
}

Overlay Events ​

事件名说明回调参数
ea-open开启 Overlay 时触发的事件—
ea-opened开启 Overlay 的动画结束时触发—
ea-close关闭 Overlay 时触发的事件—
ea-closed关闭 Overlay 的动画结束时触发—

Overlay Methods ​

方法名说明参数
show显示 Overlay—
hide隐藏 Overlay—

Overlay Slots ​

名称说明
defaultOverlay 内容插槽