Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 cfd0075c 编写于 作者: L love_forever 提交者： GitHub
浏览文件
操作

feat: popup在线文档接入和国际化支持 (#167)

上级 2467e7ab
隐藏空白更改
内联 并排
Showing with 408 addition and 128 deletion
src/packages/popup/demo.tsx
浏览文件 @ cfd0075c
import React, { useState } from 'react'
import { useTranslate } from '../../sites/assets/locale'
import Cell from '@/packages/cell'
import Popup from '@/packages/popup'
import './demo.scss'
interface T {
ce5c5446: string
c38a08ef: string
b840c88f: string
a74a1fd4: string
'8dab2f66': string
cfbdc781: string
c3a3a1d2: string
e51e4582: string
'7db1a8b2': string
a52bef0c: string
d04fcbda: string
'0aaad620': string
}
const PopupDemo = () => {
const [translated] = useTranslate<T>({
'zh-CN': {
ce5c5446: '基础类型',
c38a08ef: '展示弹出层',
b840c88f: '正文',
a74a1fd4: '弹出位置',
'8dab2f66': '顶部弹出',
cfbdc781: '底部弹出',
c3a3a1d2: '左侧弹出',
e51e4582: '右侧弹出',
'7db1a8b2': '关闭图标',
a52bef0c: '图标位置',
d04fcbda: '自定义图标',
'0aaad620': '圆角弹框',
},
'zh-TW': {
ce5c5446: '基礎類型',
c38a08ef: '展示彈出層',
b840c88f: '正文',
a74a1fd4: '彈出位置',
'8dab2f66': '頂部彈出',
cfbdc781: '底部彈出',
c3a3a1d2: '左側彈出',
e51e4582: '右側彈出',
'7db1a8b2': '關閉圖標',
a52bef0c: '圖標位置',
d04fcbda: '自定義圖標',
'0aaad620': '圓角彈框',
},
'en-US': {
ce5c5446: 'base type',
c38a08ef: 'Show popup',
b840c88f: 'text',
a74a1fd4: 'popup location',
'8dab2f66': 'top pop',
cfbdc781: 'bottom pop',
c3a3a1d2: 'pop up left',
e51e4582: 'pop up right',
'7db1a8b2': 'close icon',
a52bef0c: 'Icon position',
d04fcbda: 'custom icon',
'0aaad620': 'Rounded popup',
},
})
const [showBasic, setShowBasic] = useState(false)
const [showTop, setShowTop] = useState(false)
const [showBottom, setShowBottom] = useState(false)
......@@ -17,9 +78,9 @@ const PopupDemo = () => {
return (
<>
<div className="demo">
<h2>基础用法</h2>
<h2>{translated.ce5c5446}</h2>
<Cell
title="展示弹出层"
title={translated.c38a08ef}
isLink
onClick={() => {
setShowBasic(true)
......@@ -32,12 +93,12 @@ const PopupDemo = () => {
setShowBasic(false)
}}
>
正文
{translated.b840c88f}
</Popup>
<h2>弹出位置</h2>
<h2>{translated.a74a1fd4}</h2>
<Cell
title="顶部弹出"
title={translated['8dab2f66']}
isLink
onClick={() => {
setShowTop(true)
......@@ -52,7 +113,7 @@ const PopupDemo = () => {
}}
/>
<Cell
title="底部弹出"
title={translated.cfbdc781}
isLink
onClick={() => {
setShowBottom(true)
......@@ -67,7 +128,7 @@ const PopupDemo = () => {
}}
/>
<Cell
title="左侧弹出"
title={translated.c3a3a1d2}
isLink
onClick={() => {
setShowLeft(true)
......@@ -82,7 +143,7 @@ const PopupDemo = () => {
}}
/>
<Cell
title="右侧弹出"
title={translated.e51e4582}
isLink
onClick={() => {
setShowRight(true)
......@@ -97,9 +158,9 @@ const PopupDemo = () => {
}}
/>
<h2>关闭图标</h2>
<h2>{translated['7db1a8b2']}</h2>
<Cell
title="关闭图标"
title={translated['7db1a8b2']}
isLink
onClick={() => {
setShowIcon(true)
......@@ -115,7 +176,7 @@ const PopupDemo = () => {
}}
/>
<Cell
title="图标位置"
title={translated.a52bef0c}
isLink
onClick={() => {
setShowIconPosition(true)
......@@ -132,7 +193,7 @@ const PopupDemo = () => {
}}
/>
<Cell
title="自定义图标"
title={translated.d04fcbda}
isLink
onClick={() => {
setShowIconDefine(true)
......@@ -149,9 +210,9 @@ const PopupDemo = () => {
}}
/>
<h2>圆角弹框</h2>
<h2>{translated['0aaad620']}</h2>
<Cell
title="圆角弹框"
title={translated['0aaad620']}
isLink
onClick={() => {
setShowBottomRound(true)
......
src/packages/popup/doc.en-US.md
浏览文件 @ cfd0075c
# Popup 弹出层
# Popup
### 介绍
### introduce
弹出层容器，用于展示弹窗、信息提示等内容
Popup layer container, used to display pop-up windows, information prompts, etc.
### 安装
### Install
``` javascript
import { Popup } from '@nutui/nutui-react';
```
## 代码演示
## code demo
### 基础用法
### Basic usage
`visible` 控制显示/隐藏
`visible` Control show/hide
```html
<Popup visible={ showBasic } style={{ padding: '30px 50px' }} onClose={ () => { setShowBasic(false) } }>正文</Popup>
```
:::demo
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react';
### 弹出位置
const App = () => {
const [showBasic, setShowBasic] = useState(false);
return (
<>
<Cell title="Show popup" isLink onClick={() => { setShowBasic(true) }}/>
<Popup visible={ showBasic } style={{ padding: '30px 50px' }} onClose={ () => { setShowBasic(false) } }>text</Popup>
</>
);
};
export default App;
```html
<Popup visible={ showTop } style={{ height: '20%' }} position="top" onClose={ () => { setShowTop(false) } }></Popup>
<Popup visible={ showBottom } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowBottom(false) } }></Popup>
<Popup visible={ showLeft } style={{ width: '20%', height: '100%' }} position="left" onClose={ () => { setShowLeft(false) } }></Popup>
<Popup visible={ showRight } style={{ width: '20%', height: '100%' }} position="right" onClose={ () => { setShowRight(false) } }></Popup>
```
:::
### popup location
:::demo
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react';
const App = () => {
const [showTop, setShowTop] = useState(false);
const [showBottom, setShowBottom] = useState(false);
const [showLeft, setShowLeft] = useState(false);
const [showRight, setShowRight] = useState(false);
return (
<>
<Cell title="top pop" isLink onClick={() => { setShowTop(true) }}/>
<Cell title="bottom pop" isLink onClick={() => { setShowBottom(true) }}/>
<Cell title="pop up left" isLink onClick={() => { setShowLeft(true) }}/>
<Cell title="pop up right" isLink onClick={() => { setShowRight(true) }}/>
<Popup visible={ showTop } style={{ height: '20%' }} position="top" onClose={ () => { setShowTop(false) } }></Popup>
<Popup visible={ showBottom } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowBottom(false) } }></Popup>
<Popup visible={ showLeft } style={{ width: '20%', height: '100%' }} position="left" onClose={ () => { setShowLeft(false) } }></Popup>
<Popup visible={ showRight } style={{ width: '20%', height: '100%' }} position="right" onClose={ () => { setShowRight(false) } }></Popup>
</>
);
};
export default App;
### 图标
```html
<Popup closeable visible={ showIcon } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowIcon(false) } }></Popup>
<Popup closeable visible={ showIconPosition } style={{ height: '20%' }} closeIconPosition="top-left" position="bottom" onClose={ () => { setShowIconPosition(false) } }></Popup>
<Popup closeable visible={ showIconDefine } style={{ height: '20%' }} closeIcon="heart" position="bottom" onClose={ () => { setShowIconDefine(false) } }></Popup>
```
:::
### Icon
:::demo
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react';
const App = () => {
const [showIcon, setShowIcon] = useState(false);
const [showIconPosition, setShowIconPosition] = useState(false);
const [showIconDefine, setShowIconDefine] = useState(false);
return (
<>
<Cell title="close icon" isLink onClick={() => { setShowIcon(true) }}/>
<Cell title="Icon position" isLink onClick={() => { setShowIconPosition(true) }}/>
<Cell title="custom icon" isLink onClick={() => { setShowIconDefine(true) }}/>
<Popup closeable visible={ showIcon } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowIcon(false) } }></Popup>
<Popup closeable visible={ showIconPosition } style={{ height: '20%' }} closeIconPosition="top-left" position="bottom" onClose={ () => { setShowIconPosition(false) } }></Popup>
<Popup closeable visible={ showIconDefine } style={{ height: '20%' }} closeIcon="heart" position="bottom" onClose={ () => { setShowIconDefine(false) } }></Popup>
</>
);
};
export default App;
### 圆角弹框
```html
<Popup closeable visible={ showBottomRound } style={{ height: '20%' }} position="bottom" round onClose={ () => { setShowBottomRound(false) } }></Popup>
```
:::
### Rounded popup
:::demo
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react';
const App = () => {
const [showBottomRound, setShowBottomRound] = useState(false);
return (
<>
<Cell title="Rounded popup" isLink onClick={() => { setShowBottomRound(true) }}/>
<Popup closeable visible={ showBottomRound } style={{ height: '20%' }} position="bottom" round onClose={ () => { setShowBottomRound(false) } }></Popup>
</>
);
};
export default App;
```
:::
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
| Props | Description | Type | Default |
|------------------------|-------------------------------------------------------------|----------------|---------------|
| visible | 当前组件是否显示 | Boolean | `false` |
| zIndex | 遮罩层级 | String、Number | `2000` |
| duration | 遮罩动画时长，单位秒 | Number | `0.3` |
| overlayClass | 自定义遮罩类名 | String | - |
| overlayStyle | 自定义遮罩样式 | CSSProperties | - |
| lockScroll | 背景是否锁定 | Boolean | `true` |
| overlay | 是否显示遮罩 | Boolean | `true` |
| closeOnClickOverlay | 是否点击遮罩关闭 | Boolean | `true` |
| position | 弹出位置（top,bottom,left,right,center） | String | `"center"` |
| transition | 动画名 | String | - |
| style | 自定义弹框样式 | CSSProperties | - |
| popClass | 自定义弹框类名 | String | - |
| closeable | 是否显示关闭按钮 | Boolean | `false` |
| closeIconPosition | 关闭按钮位置（top-left,top-right,bottom-left,bottom-right） | String | `"top-right"` |
| closeIcon | 自定义 Icon | String | `"close"` |
| destroyOnClose | 组件销毁后是否关闭 | Boolean | `true` |
| round | 是否显示圆角 | Boolean | `false` |
| visible | Whether the current component is displayed | Boolean | `false` |
| zIndex | mask level | String、Number | `2000` |
| duration | Mask animation duration, in seconds | Number | `0.3` |
| overlayClass | custom mask class name | String | - |
| overlayStyle | custom mask style | CSSProperties | - |
| lockScroll | Whether the background is locked | Boolean | `true` |
| overlay | Whether to show the mask | Boolean | `true` |
| closeOnClickOverlay | Whether to click the mask to close | Boolean | `true` |
| position | popup location（top,bottom,left,right,center） | String | `"center"` |
| transition | animation name | String | - |
| style | Custom popup style | CSSProperties | - |
| popClass | Custom popup class name | String | - |
| closeable | whether to show the close button | Boolean | `false` |
| closeIconPosition | close button position（top-left,top-right,bottom-left,bottom-right） | String | `"top-right"` |
| closeIcon | Custom Icon | String | `"close"` |
| destroyOnClose | Whether to close after the component is destroyed | Boolean | `true` |
| round | Whether to show rounded corners | Boolean | `false` |
### Events
| 事件名 | 说明 | 回调参数 |
| Event | Description | Callback parameters |
|------------------|------------------------|----------------|
| onClick | 点击弹框时触发 | `event: MouseEvent` |
| onClickCloseIcon | 点击关闭图标时触发 | `event: MouseEvent` |
| onOpen | 打开弹框时触发 | - |
| onClose | 关闭弹框时触发 | - |
| onOpend | 遮罩打开动画结束时触发 | `event: HTMLElement` |
| onClosed | 遮罩关闭动画结束时触发 | `event: HTMLElement` |
| onClickOverlay | 点击遮罩触发 | `event: MouseEvent` |
| onClick | Triggered when the popup is clicked | `event: MouseEvent` |
| onClickCloseIcon | Fired when the close icon is clicked | `event: MouseEvent` |
| onOpen | Triggered when the popup is opened | - |
| onClose | Fired when the popup is closed | - |
| onOpend | Fired when the mask opening animation ends | `event: HTMLElement` |
| onClosed | Fired when the mask closing animation ends | `event: HTMLElement` |
| onClickOverlay | Click on the mask to trigger | `event: MouseEvent` |
src/packages/popup/doc.md
浏览文件 @ cfd0075c
......@@ -16,32 +16,105 @@ import { Popup } from '@nutui/nutui-react';
`visible` 控制显示/隐藏
```html
<Popup visible={ showBasic } style={{ padding: '30px 50px' }} onClose={ () => { setShowBasic(false) } }>正文</Popup>
:::demo
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react';
const App = () => {
const [showBasic, setShowBasic] = useState(false);
return (
<>
<Cell title="展示弹出层" isLink onClick={() => { setShowBasic(true) }}/>
<Popup visible={ showBasic } style={{ padding: '30px 50px' }} onClose={ () => { setShowBasic(false) } }>正文</Popup>
</>
);
};
export default App;
```
:::
### 弹出位置
```html
<Popup visible={ showTop } style={{ height: '20%' }} position="top" onClose={ () => { setShowTop(false) } }></Popup>
<Popup visible={ showBottom } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowBottom(false) } }></Popup>
<Popup visible={ showLeft } style={{ width: '20%', height: '100%' }} position="left" onClose={ () => { setShowLeft(false) } }></Popup>
<Popup visible={ showRight } style={{ width: '20%', height: '100%' }} position="right" onClose={ () => { setShowRight(false) } }></Popup>
:::demo
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react';
const App = () => {
const [showTop, setShowTop] = useState(false);
const [showBottom, setShowBottom] = useState(false);
const [showLeft, setShowLeft] = useState(false);
const [showRight, setShowRight] = useState(false);
return (
<>
<Cell title="顶部弹出" isLink onClick={() => { setShowTop(true) }}/>
<Cell title="底部弹出" isLink onClick={() => { setShowBottom(true) }}/>
<Cell title="左侧弹出" isLink onClick={() => { setShowLeft(true) }}/>
<Cell title="右侧弹出" isLink onClick={() => { setShowRight(true) }}/>
<Popup visible={ showTop } style={{ height: '20%' }} position="top" onClose={ () => { setShowTop(false) } }></Popup>
<Popup visible={ showBottom } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowBottom(false) } }></Popup>
<Popup visible={ showLeft } style={{ width: '20%', height: '100%' }} position="left" onClose={ () => { setShowLeft(false) } }></Popup>
<Popup visible={ showRight } style={{ width: '20%', height: '100%' }} position="right" onClose={ () => { setShowRight(false) } }></Popup>
</>
);
};
export default App;
```
:::
### 图标
```html
<Popup closeable visible={ showIcon } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowIcon(false) } }></Popup>
<Popup closeable visible={ showIconPosition } style={{ height: '20%' }} closeIconPosition="top-left" position="bottom" onClose={ () => { setShowIconPosition(false) } }></Popup>
<Popup closeable visible={ showIconDefine } style={{ height: '20%' }} closeIcon="heart" position="bottom" onClose={ () => { setShowIconDefine(false) } }></Popup>
:::demo
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react';
const App = () => {
const [showIcon, setShowIcon] = useState(false);
const [showIconPosition, setShowIconPosition] = useState(false);
const [showIconDefine, setShowIconDefine] = useState(false);
return (
<>
<Cell title="关闭图标" isLink onClick={() => { setShowIcon(true) }}/>
<Cell title="图标位置" isLink onClick={() => { setShowIconPosition(true) }}/>
<Cell title="自定义图标" isLink onClick={() => { setShowIconDefine(true) }}/>
<Popup closeable visible={ showIcon } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowIcon(false) } }></Popup>
<Popup closeable visible={ showIconPosition } style={{ height: '20%' }} closeIconPosition="top-left" position="bottom" onClose={ () => { setShowIconPosition(false) } }></Popup>
<Popup closeable visible={ showIconDefine } style={{ height: '20%' }} closeIcon="heart" position="bottom" onClose={ () => { setShowIconDefine(false) } }></Popup>
</>
);
};
export default App;
```
:::
### 圆角弹框
```html
<Popup closeable visible={ showBottomRound } style={{ height: '20%' }} position="bottom" round onClose={ () => { setShowBottomRound(false) } }></Popup>
:::demo
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react';
const App = () => {
const [showBottomRound, setShowBottomRound] = useState(false);
return (
<>
<Cell title="圆角弹框" isLink onClick={() => { setShowBottomRound(true) }}/>
<Popup closeable visible={ showBottomRound } style={{ height: '20%' }} position="bottom" round onClose={ () => { setShowBottomRound(false) } }></Popup>
</>
);
};
export default App;
```
:::
## API
......
src/packages/popup/doc.zh-TW.md
浏览文件 @ cfd0075c
# Popup 弹出层
# Popup 彈出層
### 介绍
弹出层容器，用于展示弹窗、信息提示等内容
彈出層容器，用於展示彈窗、信息提示等內容
### 安装
### 安裝
``` javascript
import { Popup } from '@nutui/nutui-react';
```
## 代码演示
## 代碼演示
### 基础用法
### 基礎用法
`visible` 控制显示/隐藏
`visible` 控製顯示/隱藏
```html
<Popup visible={ showBasic } style={{ padding: '30px 50px' }} onClose={ () => { setShowBasic(false) } }>正文</Popup>
```
:::demo
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react';
### 弹出位置
const App = () => {
const [showBasic, setShowBasic] = useState(false);
return (
<>
<Cell title="展示彈出層" isLink onClick={() => { setShowBasic(true) }}/>
<Popup visible={ showBasic } style={{ padding: '30px 50px' }} onClose={ () => { setShowBasic(false) } }>正文</Popup>
</>
);
};
export default App;
```html
<Popup visible={ showTop } style={{ height: '20%' }} position="top" onClose={ () => { setShowTop(false) } }></Popup>
<Popup visible={ showBottom } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowBottom(false) } }></Popup>
<Popup visible={ showLeft } style={{ width: '20%', height: '100%' }} position="left" onClose={ () => { setShowLeft(false) } }></Popup>
<Popup visible={ showRight } style={{ width: '20%', height: '100%' }} position="right" onClose={ () => { setShowRight(false) } }></Popup>
```
:::
### 彈出位置
:::demo
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react';
const App = () => {
const [showTop, setShowTop] = useState(false);
const [showBottom, setShowBottom] = useState(false);
const [showLeft, setShowLeft] = useState(false);
const [showRight, setShowRight] = useState(false);
return (
<>
<Cell title="頂部彈出" isLink onClick={() => { setShowTop(true) }}/>
<Cell title="底部彈出" isLink onClick={() => { setShowBottom(true) }}/>
<Cell title="左側彈出" isLink onClick={() => { setShowLeft(true) }}/>
<Cell title="右側彈出" isLink onClick={() => { setShowRight(true) }}/>
<Popup visible={ showTop } style={{ height: '20%' }} position="top" onClose={ () => { setShowTop(false) } }></Popup>
<Popup visible={ showBottom } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowBottom(false) } }></Popup>
<Popup visible={ showLeft } style={{ width: '20%', height: '100%' }} position="left" onClose={ () => { setShowLeft(false) } }></Popup>
<Popup visible={ showRight } style={{ width: '20%', height: '100%' }} position="right" onClose={ () => { setShowRight(false) } }></Popup>
</>
);
};
export default App;
### 图标
```html
<Popup closeable visible={ showIcon } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowIcon(false) } }></Popup>
<Popup closeable visible={ showIconPosition } style={{ height: '20%' }} closeIconPosition="top-left" position="bottom" onClose={ () => { setShowIconPosition(false) } }></Popup>
<Popup closeable visible={ showIconDefine } style={{ height: '20%' }} closeIcon="heart" position="bottom" onClose={ () => { setShowIconDefine(false) } }></Popup>
```
:::
### 圖標
:::demo
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react';
const App = () => {
const [showIcon, setShowIcon] = useState(false);
const [showIconPosition, setShowIconPosition] = useState(false);
const [showIconDefine, setShowIconDefine] = useState(false);
return (
<>
<Cell title="關閉圖標" isLink onClick={() => { setShowIcon(true) }}/>
<Cell title="圖標位置" isLink onClick={() => { setShowIconPosition(true) }}/>
<Cell title="自定義圖標" isLink onClick={() => { setShowIconDefine(true) }}/>
<Popup closeable visible={ showIcon } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowIcon(false) } }></Popup>
<Popup closeable visible={ showIconPosition } style={{ height: '20%' }} closeIconPosition="top-left" position="bottom" onClose={ () => { setShowIconPosition(false) } }></Popup>
<Popup closeable visible={ showIconDefine } style={{ height: '20%' }} closeIcon="heart" position="bottom" onClose={ () => { setShowIconDefine(false) } }></Popup>
</>
);
};
export default App;
### 圆角弹框
```html
<Popup closeable visible={ showBottomRound } style={{ height: '20%' }} position="bottom" round onClose={ () => { setShowBottomRound(false) } }></Popup>
```
:::
### 圓角彈框
:::demo
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react';
const App = () => {
const [showBottomRound, setShowBottomRound] = useState(false);
return (
<>
<Cell title="圓角彈框" isLink onClick={() => { setShowBottomRound(true) }}/>
<Popup closeable visible={ showBottomRound } style={{ height: '20%' }} position="bottom" round onClose={ () => { setShowBottomRound(false) } }></Popup>
</>
);
};
export default App;
```
:::
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
| 參數 | 說明 | 類型 | 默認值 |
|------------------------|-------------------------------------------------------------|----------------|---------------|
| visible | 当前组件是否显示 | Boolean | `false` |
| zIndex | 遮罩层级 | String、Number | `2000` |
| duration | 遮罩动画时长，单位秒 | Number | `0.3` |
| overlayClass | 自定义遮罩类名 | String | - |
| overlayStyle | 自定义遮罩样式 | CSSProperties | - |
| lockScroll | 背景是否锁定 | Boolean | `true` |
| overlay | 是否显示遮罩 | Boolean | `true` |
| closeOnClickOverlay | 是否点击遮罩关闭 | Boolean | `true` |
| position | 弹出位置（top,bottom,left,right,center） | String | `"center"` |
| transition | 动画名 | String | - |
| style | 自定义弹框样式 | CSSProperties | - |
| popClass | 自定义弹框类名 | String | - |
| closeable | 是否显示关闭按钮 | Boolean | `false` |
| closeIconPosition | 关闭按钮位置（top-left,top-right,bottom-left,bottom-right） | String | `"top-right"` |
| closeIcon | 自定义 Icon | String | `"close"` |
| destroyOnClose | 组件销毁后是否关闭 | Boolean | `true` |
| round | 是否显示圆角 | Boolean | `false` |
| visible | 當前組件是否顯示 | Boolean | `false` |
| zIndex | 遮罩層級 | String、Number | `2000` |
| duration | 遮罩動畫時長，單位秒 | Number | `0.3` |
| overlayClass | 自定義遮罩類名 | String | - |
| overlayStyle | 自定義遮罩樣式 | CSSProperties | - |
| lockScroll | 背景是否鎖定 | Boolean | `true` |
| overlay | 是否顯示遮罩 | Boolean | `true` |
| closeOnClickOverlay | 是否點擊遮罩關閉 | Boolean | `true` |
| position | 彈出位置（top,bottom,left,right,center） | String | `"center"` |
| transition | 動畫名 | String | - |
| style | 自定義彈框樣式 | CSSProperties | - |
| popClass | 自定義彈框類名 | String | - |
| closeable | 是否顯示關閉按鈕 | Boolean | `false` |
| closeIconPosition | 關閉按鈕位置（top-left,top-right,bottom-left,bottom-right） | String | `"top-right"` |
| closeIcon | 自定義 Icon | String | `"close"` |
| destroyOnClose | 組件銷毀後是否關閉 | Boolean | `true` |
| round | 是否顯示圓角 | Boolean | `false` |
### Events
| 事件名 | 说明 | 回调参数 |
| 事件名 | 說明 | 回調參數 |
|------------------|------------------------|----------------|
| onClick | 点击弹框时触发 | `event: MouseEvent` |
| onClickCloseIcon | 点击关闭图标时触发 | `event: MouseEvent` |
| onOpen | 打开弹框时触发 | - |
| onClose | 关闭弹框时触发 | - |
| onOpend | 遮罩打开动画结束时触发 | `event: HTMLElement` |
| onClosed | 遮罩关闭动画结束时触发 | `event: HTMLElement` |
| onClickOverlay | 点击遮罩触发 | `event: MouseEvent` |
| onClick | 點擊彈框時觸發 | `event: MouseEvent` |
| onClickCloseIcon | 點擊關閉圖標時觸發 | `event: MouseEvent` |
| onOpen | 打開彈框時觸發 | - |
| onClose | 關閉彈框時觸發 | - |
| onOpend | 遮罩打開動畫結束時觸發 | `event: HTMLElement` |
| onClosed | 遮罩關閉動畫結束時觸發 | `event: HTMLElement` |
| onClickOverlay | 點擊遮罩觸發 | `event: MouseEvent` |
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或