feat: 提交overlay遮罩层组件

src/config.json

@@ -151,6 +151,16 @@
           "sort": 1,
           "show": false,
           "author": "songsong"
+        },
+        {
+          "version": "1.0.0",
+          "name": "Overlay",
+          "type": "component",
+          "cName": "遮罩层",
+          "desc": "创建一个遮罩层，通常用于阻止用户进行其他操作",
+          "sort": 5,
+          "show": true,
+          "author": "junjun"
         }
       ]
     },

src/packages/avatar/demo.tsx

 import React from 'react'
 import { Avatar } from './avatar'
+import Cell from '@/packages/cell'
 
 const AvatarDemo = () => {
+  const AvatarStyle = {
+    alignItems: 'flex-end',
+  }
   const handleClick = () => {
     console.log('触发点击头像')
   }
@@ -9,29 +13,41 @@ const AvatarDemo = () => {
     <>
       <div className="demo">
         <h2>默认用法 (内置&quot;small&quot;,&quot;normal&quot;,&quot;large&quot;三种尺寸规格)</h2>
-        <Avatar
-          size="large"
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-        ></Avatar>
-        <Avatar
-          size="normal"
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-        ></Avatar>
-        <Avatar
-          size="small"
-          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-        ></Avatar>
+        <Cell style={AvatarStyle}>
+          <Avatar
+            size="large"
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+          ></Avatar>
+          <Avatar
+            size="normal"
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+          ></Avatar>
+          <Avatar
+            size="small"
+            src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+          ></Avatar>
+        </Cell>
         <h2>修改形状</h2>
-        <Avatar shape="square"></Avatar>
-        <Avatar shape="round"></Avatar>
+        <Cell>
+          <Avatar shape="square"></Avatar>
+          <Avatar shape="round"></Avatar>
+        </Cell>
         <h2>修改背景色</h2>
-        <Avatar bgColor="#FA2C19"></Avatar>
+        <Cell>
+          <Avatar bgColor="#FA2C19"></Avatar>
+        </Cell>
         <h2>修改背景图片</h2>
-        <Avatar icon="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></Avatar>
+        <Cell>
+          <Avatar icon="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></Avatar>
+        </Cell>
         <h2>可以修改头像的内容</h2>
-        <Avatar icon="">N</Avatar>
+        <Cell>
+          <Avatar icon="">N</Avatar>
+        </Cell>
         <h2>点击头像触发事件</h2>
-        <Avatar icon="my" onClick={handleClick}></Avatar>
+        <Cell>
+          <Avatar icon="my" onClick={handleClick}></Avatar>
+        </Cell>
       </div>
     </>
   )

src/packages/avatar/doc.md

@@ -6,11 +6,7 @@
 
 ### 安装
 ``` javascript
-import { createApp } from 'vue';
 import { Avatar } from '@nutui/nutui';
-
-const app = createApp();
-app.use(Avatar);
 ```
 
 ## 代码示例
@@ -19,38 +15,38 @@ app.use(Avatar);
 
 内置 smal / normal / large 三种尺寸规格
 
-``` html
-<nut-avatar size="large" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-></nut-avatar>
-<nut-avatar size="normal" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-></nut-avatar>
-<nut-avatar size="small" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-></nut-avatar>  
+``` tsx
+<Avatar size="large" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+></Avatar>
+<Avatar size="normal" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+></Avatar>
+<Avatar size="small" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+></Avatar>  
 ```
 
 ### 修改形状类型
 
-``` html
-<nut-avatar shape="square"></nut-avatar>
-<nut-avatar shape="round"></nut-avatar>
+``` tsx
+<Avatar shape="square"></Avatar>
+<Avatar shape="round"></Avatar>
 ```
 
 ### 修改背景色
 
-``` html
-<nut-avatar bg-color="#f0250f"></nut-avatar>
+``` tsx
+<Avatar bg-color="#f0250f"></Avatar>
 ```
 
 ### 修改背景icon
 
-``` html
-<nut-avatar icon="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar>
+``` tsx
+<Avatar icon="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></Avatar>
 ```
 
 ### 设置头像的文本内容
 
-``` html
-<nut-avatar icon>N</nut-avatar>
+``` tsx
+<Avatar icon>N</Avatar>
 ```
 
 
@@ -58,7 +54,7 @@ app.use(Avatar);
 
 | 字段     | 说明                                                                     | 类型   | 默认值 |
 |----------|--------------------------------------------------------------------------|--------|--------|
-| bg-color | 设置头像背景色                                                           | String | #eee   |
+| bgColor | 设置头像背景色                                                           | String | #eee   |
 | size     | 设置头像的大小，提供三种：large/normal/small，支持直接输入数字           | String | normal |
 | shape    | 设置头像的形状，默认是圆形，可以设置为square方形                         | String | round  |
 | src      | 设置头像的背景图片                                                       | String | ''     |
@@ -68,4 +64,4 @@ app.use(Avatar);
 
 | 字段     | 说明                 | 类型     | 回调参数 |
 |----------|----------------------|----------|----------|
-| on-error | 加载图片失败触发事件 | Function | event    |
\ No newline at end of file
+| onClick | 点击图片触发事件 | Function | event    |
\ No newline at end of file

src/packages/button/button.tsx

@@ -86,7 +86,6 @@ export const Button: FunctionComponent<Partial<ButtonProps>> = (props) => {
     ${disabled ? `${prefixCls}--disabled` : ''} 
     ${loading ? `${prefixCls}--loading` : ''}`
   }
-
   const handleClick = (e: any) => {
     if (!loading && !disabled && onClick) {
       onClick(e)
@@ -94,7 +93,6 @@ export const Button: FunctionComponent<Partial<ButtonProps>> = (props) => {
   }
   const getStyle = () => {
     const style: CSSProperties = {}
-    console.log(plain)
     if (color) {
       if (plain) {
         style.color = color

src/packages/cell/cell.tsx

@@ -32,7 +32,9 @@ const defaultProps = {
   extra: '',
   click: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {},
 } as CellProps
-export const Cell: FunctionComponent<Partial<CellProps>> = (props) => {
+export const Cell: FunctionComponent<Partial<CellProps> & React.HTMLAttributes<HTMLDivElement>> = (
+  props
+) => {
   const {
     children,
     click,
@@ -47,6 +49,7 @@ export const Cell: FunctionComponent<Partial<CellProps>> = (props) => {
     title,
     subTitle,
     extra,
+    ...rest
   } = {
     ...defaultProps,
     ...props,
@@ -69,6 +72,7 @@ export const Cell: FunctionComponent<Partial<CellProps>> = (props) => {
     <div
       className={`${b({ clickable: isLink || to ? true : false }, [classPrefix])} `}
       onClick={(event) => handleClick(event)}
+      {...rest}
     >
       {children ? (
         children

src/packages/overlay/demo.scss

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

src/packages/overlay/demo.tsx

+import React, { useState } from 'react'
+import { Overlay } from './overlay'
+import Cell from '@/packages/cell'
+import Button from '@/packages/button'
+import './demo.scss'
+
+const OverlayDemo = () => {
+  const [visible, setVisible] = useState(false)
+  const [visible2, setVisible2] = useState(false)
+  const handleToggleShow = () => {
+    setVisible(true)
+  }
+  const handleToggleShow2 = () => {
+    setVisible2(true)
+  }
+  const onClose = () => {
+    setVisible(false)
+  }
+  const onClose2 = () => {
+    setVisible2(false)
+  }
+  return (
+    <>
+      <div className="demo">
+        <h2>基础用法</h2>
+        <Cell>
+          <Button type="primary" onClick={handleToggleShow}>
+            显示遮罩层
+          </Button>
+          <Overlay visible={visible} onClick={onClose}></Overlay>
+        </Cell>
+        <h2>嵌套内容</h2>
+        <Cell>
+          <Button type="success" onClick={handleToggleShow2}>
+            嵌套内容
+          </Button>
+          <Overlay visible={visible2} onClick={onClose2}>
+            <div className="wrapper">
+              <div className="content">这里是正文</div>
+            </div>
+          </Overlay>
+        </Cell>
+      </div>
+    </>
+  )
+}
+
+export default OverlayDemo

src/packages/overlay/doc.md

+# Overlay 组件
+
+### 介绍
+
+创建一个遮罩层，通常用于阻止用户进行其他操作
+
+### 安装
+
+
+``` javascript
+import { OverLay } from '@nutui/nutui';
+```
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+<Overlay visible={true} zindex={2000}></Overlay>
+```
+
+### 嵌套内容
+
+```tsx
+<nut-overlay visible={true} zIndex={2000}>
+  <div className="wrapper">
+    <div className="content">这里是正文</div>
+  </div>
+</nut-overlay>
+```
+
+## API
+
+### Props
+
+| 参数                   | 说明             | 类型           | 默认值 |
+| ---------------------- | ---------------- | -------------- | ------ |
+| visible                   | 当前组件是否显示 | Boolean        | `false`  |
+| zIndex                | 遮罩层级         | Number | 2000   |
+| duration               | 动画时长，单位秒 | Number | 0.3    |
+| overlayClass          | 自定义遮罩类名   | String         | -      |
+| overlayStyle          | 自定义遮罩样式   | CSSProperties  | -      |
+| closeOnClickOverlay | 是否点击遮罩关闭 | Boolean        | `true`   |
+
+### Events
+
+| 事件名 | 说明       | 回调参数     |
+| ------ | ---------- | ------------ |
+| onClick  | 点击时触发 | event: Event |

src/packages/overlay/index.ts

+import { Overlay } from './overlay'
+export default Overlay

src/packages/overlay/overlay.scss

+.nut-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: $overlay-bg-color;
+}
+.overlay-fade-enter-active {
+  animation: nut-fade-in;
+}
+.overlay-fade-leave-active {
+  animation: nut-fade-out;
+}
+.first-render {
+  display: none;
+}
+.hidden-render {
+  display: none;
+}
+@keyframes nut-fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  1% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes nut-fade-out {
+  0% {
+    opacity: 1;
+  }
+
+  1% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

src/packages/overlay/overlay.tsx

+import React, { FunctionComponent, MouseEventHandler, useEffect, useRef, useState } from 'react'
+import bem from '@/utils/bem'
+import classNames from 'classnames'
+import './overlay.scss'
+
+export interface OverlayProps {
+  zIndex: number
+  duration: number
+  overlayClass: string
+  overlayStyle: React.CSSProperties
+  closeOnClickOverlay: boolean
+  visible: boolean
+}
+const defaultProps = {
+  zIndex: 2000,
+  duration: 0.3,
+  overlayClass: '',
+  closeOnClickOverlay: true,
+  visible: false,
+} as OverlayProps
+export const Overlay: FunctionComponent<
+  Partial<OverlayProps> & React.HTMLAttributes<HTMLDivElement>
+> = (props) => {
+  const [show, setShow] = useState(false)
+  const renderRef = useRef(true)
+  const intervalRef = useRef(0)
+  const { children, zIndex, duration, overlayClass, closeOnClickOverlay, visible, ...rest } = {
+    ...defaultProps,
+    ...props,
+  }
+  useEffect(() => {
+    setShow(false)
+  }, [visible])
+  useEffect(() => {
+    return () => {
+      clearTimeout(intervalRef.current)
+    }
+  }, [])
+  const b = bem('overlay')
+  const classes = classNames(
+    {
+      [overlayClass]: true,
+      'overlay-fade-leave-active': !renderRef.current && !visible,
+      'overlay-fade-enter-active': visible,
+      'first-render': renderRef.current && !visible,
+      'hidden-render': show,
+    },
+    b('')
+  )
+  const styles = {
+    zIndex: zIndex,
+    animationDuration: `${props.duration}s`,
+    ...props.overlayStyle,
+  }
+  const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
+    renderRef.current = false
+    let id = setTimeout(() => {
+      setShow(true)
+    }, duration * 1000 * 0.8)
+    intervalRef.current = id
+    if (props.onClick) {
+      props.onClick(e)
+    }
+  }
+  return (
+    <React.Fragment>
+      <div className={classes} style={styles} {...rest} onClick={handleClick}>
+        {children}
+      </div>
+    </React.Fragment>
+  )
+}
+
+Overlay.defaultProps = defaultProps
+Overlay.displayName = 'NutOverlay'