vaadin-overlay 是一个使用 Web 组件技术(Shadow DOM & Custom Elements)构建的，轻量级的弹出窗口组件。它提供了良好的可定制性和灵活性，可以轻松地嵌入到各种 Web 应用程序中，使其更加美观和丰富。
特点
- 支持是否模态化
- 支持定位和自适应位置
- 支持 content 和 template 两种不同的弹窗内容渲染方式
- 支持自定义样式
- 使用 Web 组件技术构建，兼容现代浏览器
安装和使用
使用 npm 安装：
npm install --save vaadin-overlay
在 HTML 中引入 webcomponents.js 和组件的 JavaScript 文件：
<!-- 引入 webcomponents.js --> <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> <!-- 引入 vaadin-overlay.js --> <script src="node_modules/vaadin-overlay/vaadin-overlay.js"></script>
在 JavaScript 中创建 vaadin-overlay 组件并添加到 DOM 中：
-- -------------------- ---- ------- -- -- -------------- ----- ------- - ----------------------------------------- -- -- ------- --- ------------------- - --- ------- ----- -- -- ------- -------------- - ----- -- --- --- - -----------------------------------
使用示例
模态化和非模态化
模态化：
-- -------------------- ---- ------- -- ---- -------------- -- ----- ------- - ----------------------------------------- -- ----- ------------- - ----- -- ---- ------------------- - ------- --------- -- -- ------- -------------- - -----
非模态化：
-- -------------------- ---- ------- -- ---- -------------- -- ----- ------- - ----------------------------------------- -- ------ ------------- - ------ -- ---- ------------------- - -------- --------- -- -- ------- -------------- - -----
定位和自适应位置
可以使用 withBackdrop 属性来实现定位，并使用 withPositionTarget 属性来自适应位置。
<!-- 其他内容，如按钮等 --> <button id="btn">点击打开 overlay</button>
-- -------------------- ---- ------- -- ---- ----- --- - ------------------------------- -- ---- -------------- -- ----- ------- - ----------------------------------------- -- ---- ------------------- - --- ------- ----- -- ---------- -------------------- - ----- -------------------------------- -- -- ------- -------------- - -----
内容渲染方式
可以使用 content 和 template 两种不同的方式来设置弹窗的内容。
content：
// 首先创建 vaadin-overlay 组件
const overlay = document.createElement('vaadin-overlay');
// 设置内容
overlay.content = '这是 overlay 的内容';
// 打开 overlay
overlay.opened = true;template：
<!-- 定义 template -->
<template id="overlay-template">
<div>
<h2>这是 overlay 的标题</h2>
<p>这是 overlay 的内容</p>
</div>
</template>-- -------------------- ---- ------- -- -- -------- ----- -------- - -------------------------------------------- -- ---- -------------- -- ----- ------- - ----------------------------------------- -- ---- ---------------- - --------- -- -- ------- -------------- - -----
自定义样式
可以通过 CSS 来自定义 vaadin-overlay 的样式：
/* 自定义样式 */
vaadin-overlay {
background-color: lightgray;
border-radius: 5px;
}总结
vaadin-overlay 是一个轻量级的弹出窗口组件，支持模态化和非模态化、定位和自适应位置、content 和 template 两种不同方式的弹窗内容渲染，同时也支持自定义样式。它基于 Web 组件技术构建，兼容现代浏览器，使用起来方便快捷，是一个优秀的前端组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6051ab1864dac67246