diff --git a/src/config.js b/src/config.js
index c22978b1ef891b516a49460ae5a300dce6f05832..714cedb7dd11df446d7e688e5d72feed3322994d 100644
--- a/src/config.js
+++ b/src/config.js
@@ -137,6 +137,15 @@ module.exports = {
show: true,
desc: '较长页面快捷回到顶部',
author: 'liqiong43'
+ },
+ {
+ name: 'Toast',
+ sort: '1',
+ cName: '吐司',
+ type: 'component',
+ show: true,
+ desc: '轻提示',
+ author: 'undo'
}
]
},
@@ -265,6 +274,16 @@ module.exports = {
sort: 11,
show: false,
author: 'Ymm0008'
+ },
+ {
+ version: '3.0.0',
+ name: 'OverLay',
+ type: 'component',
+ cName: '遮罩层',
+ desc: '创建一个遮罩层,通常用于阻止用户进行其他操作',
+ sort: 14,
+ show: true,
+ author: 'szg2008'
}
]
},
diff --git a/src/packages/icon/index.vue b/src/packages/icon/index.vue
index f6a216614703f8a6a6319f7b776152ee6793993d..e7cde4aebfea9cf7033f2c6f55208a9985326dde 100644
--- a/src/packages/icon/index.vue
+++ b/src/packages/icon/index.vue
@@ -1,5 +1,5 @@
diff --git a/src/packages/overlay/demo.vue b/src/packages/overlay/demo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..51b05aeed6d7ff866cafefc22c6fb505c8781d48
--- /dev/null
+++ b/src/packages/overlay/demo.vue
@@ -0,0 +1,59 @@
+
+
+
基础用法
+
+ 显示遮罩层
+
+
+
嵌套内容
+
+ 嵌套内容
+
+
+
+
+
+
+
+
+
+
diff --git a/src/packages/overlay/doc.md b/src/packages/overlay/doc.md
new file mode 100644
index 0000000000000000000000000000000000000000..14c17c655bbcd5d8944bdbdc649cc932bb325328
--- /dev/null
+++ b/src/packages/overlay/doc.md
@@ -0,0 +1,54 @@
+# overlay 组件
+
+### 介绍
+
+创建一个遮罩层,通常用于阻止用户进行其他操作
+
+### 安装
+
+```javascript
+import { createApp } from 'vue';
+import { OverLay } from '@nutui/nutui';
+
+const app = createApp();
+app.use(OverLay);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+
+```
+
+### 嵌套内容
+
+```html
+
+
+
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ---------------------- | ---------------- | -------------- | ------ |
+| show | 当前组件是否显示 | Boolean | false |
+| z-index | 遮罩层级 | String、Number | 2000 |
+| duration | 动画时长,单位秒 | String、Number | 0.3 |
+| overlay-class | 自定义遮罩类名 | String | - |
+| overlay-style | 自定义遮罩样式 | CSSProperties | - |
+| lock-scroll | 背景是否锁定 | Boolean | false |
+| overlay | 是否显示遮罩 | Boolean | true |
+| close-on-click-overlay | 是否点击遮罩关闭 | Boolean | true |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| ------ | ---------- | ------------ |
+| click | 点击时触发 | event: Event |
diff --git a/src/packages/overlay/index.scss b/src/packages/overlay/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6d7f323446b0bf3f9eb1d5a83f6e85bff756243f
--- /dev/null
+++ b/src/packages/overlay/index.scss
@@ -0,0 +1,36 @@
+.overlay-fade-enter-active {
+ animation: nut-fade-in;
+}
+
+.overlay-fade-leave-active {
+ animation: nut-fade-out;
+}
+
+.nut-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.7);
+}
+
+@keyframes nut-fade-in {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes nut-fade-out {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ }
+}
diff --git a/src/packages/popup/overlay/index.vue b/src/packages/overlay/index.vue
similarity index 56%
rename from src/packages/popup/overlay/index.vue
rename to src/packages/overlay/index.vue
index 38ce1a5e25e394f4ce279501b3296ebbaf22654c..8c06016c023131f6d5bc5ef9e8438feccadcdcc2 100644
--- a/src/packages/popup/overlay/index.vue
+++ b/src/packages/overlay/index.vue
@@ -1,18 +1,20 @@
-
+
+ :class="classes"
+ >
+
+
+
diff --git a/src/packages/popup/demo.vue b/src/packages/popup/demo.vue
index 1e548fb623d2a383afa58fdd42ad61cee0fe6a2e..5ca7d909b5c838c01afd3bda235aa188a6265951 100644
--- a/src/packages/popup/demo.vue
+++ b/src/packages/popup/demo.vue
@@ -96,7 +96,7 @@
:style="{ height: '30%' }"
v-model:show="state.showRound"
>
-
组合弹框
+