Merge branch 'next' of https://github.com/jdf2e/nutui into next

src/config.js

@@ -274,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'
         }
       ]
     },

src/packages/overlay/demo.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</h2>
+    <nut-cell>
+      <nut-button type="primary" @click="state.show = true"
+        >显示遮罩层</nut-button
+      >
+      <nut-overlay v-model:show="state.show" :z-index="2000"></nut-overlay>
+    </nut-cell>
+    <h2>嵌套内容</h2>
+    <nut-cell>
+      <nut-button type="success" @click="state.show2 = true"
+        >嵌套内容</nut-button
+      >
+      <nut-overlay v-model:show="state.show2" :z-index="2000">
+        <div class="wrapper">
+          <div class="content">这里是正文</div>
+        </div>
+      </nut-overlay>
+    </nut-cell>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive } from 'vue';
+import { createComponent } from '@/utils/create';
+const { createDemo } = createComponent('overlay');
+export default createDemo({
+  props: {},
+  setup() {
+    const state = reactive({
+      show: false,
+      show2: false
+    });
+    return {
+      state
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  .content {
+    display: flex;
+    width: 150px;
+    height: 150px;
+    background: #fff;
+    border-radius: 8px;
+    align-items: center;
+    justify-content: center;
+    color: red;
+  }
+}
+</style>

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
+<nut-overlay v-model:show="state.show" :z-index="2000"></nut-overlay>
+```
+
+### 嵌套内容
+
+```html
+<nut-overlay v-model:show="state.show2" :z-index="2000">
+  <div class="wrapper">
+    <div class="content">这里是正文</div>
+  </div>
+</nut-overlay>
+```
+
+## 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 |

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;
+  }
+}

src/packages/popup/overlay/index.vue

@@ -1,17 +1,20 @@
 <template>
-  <Transition name="popup-fade">
+  <Transition name="overlay-fade">
     <view
       @touchmove.stop="touchmove"
+      @click="onClick"
       :style="{ animationDuration: `${duration}s`, ...overlayStyle, zIndex }"
       v-show="show"
       :class="classes"
-    ></view>
+    >
+      <slot></slot>
+    </view>
   </Transition>
 </template>
 <script lang="ts">
 import { CSSProperties, PropType, computed } from 'vue';
 import { createComponent } from '@/utils/create';
-const { componentName, create } = createComponent('popup-overlay');
+const { componentName, create } = createComponent('overlay');
 const overlayProps = {
   show: {
     type: Boolean,
@@ -49,13 +52,12 @@ export { overlayProps };
 
 export default create({
   props: overlayProps,
-  emits: [],
-  setup(props) {
+  emits: ['click', 'update:show'],
+  setup(props, { emit }) {
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        ['nut-mask']: true,
         [props.overlayClass]: true
       };
     });
@@ -64,7 +66,18 @@ export default create({
         e.preventDefault();
       }
     };
-    return { classes, touchmove };
+
+    const onClick = e => {
+      emit('click', e);
+      if (props.closeOnClickOverlay) {
+        emit('update:show', false);
+      }
+    };
+
+    return { classes, touchmove, onClick };
   }
 });
 </script>
+<style lang="scss">
+@import 'index.scss';
+</style>

src/packages/popup/index.scss

@@ -1,11 +1,3 @@
-.popup-fade-enter-active {
-  animation: nut-fade-in;
-}
-
-.popup-fade-leave-active {
-  animation: nut-fade-out;
-}
-
 .popup-slide {
   &-center-enter-active {
     animation: nut-fade-in;
@@ -145,12 +137,3 @@
     }
   }
 }
-
-.nut-popup-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-}

src/packages/popup/index.vue

@@ -1,8 +1,7 @@
 <template>
   <Teleport :to="teleport">
-    <nut-popup-overlay
+    <nut-overlay
       :show="show && overlay"
-      v-if="state.overLayCount === 1"
       :class="overlayClass"
       :style="overlayStyle"
       :zIndex="state.zIndex"
@@ -43,7 +42,7 @@ import {
   CSSProperties
 } from 'vue';
 import { useLockScroll } from './use-lock-scroll';
-import Overlay, { overlayProps } from './overlay/index.vue';
+import { overlayProps } from './../overlay/index.vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('popup');
 
@@ -101,9 +100,6 @@ const popupProps = {
 };
 
 export default create({
-  Component: {
-    'nut-popup-overlay': Overlay
-  },
   props: {
     ...overlayProps,
     ...popupProps