Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eightfeet/modalv2
https://github.com/eightfeet/modalv2
Last synced: about 5 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/eightfeet/modalv2
- Owner: eightfeet
- Created: 2020-11-03T04:13:37.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-05-26T14:39:40.000Z (over 2 years ago)
- Last Synced: 2024-10-12T01:04:47.600Z (about 1 month ago)
- Language: TypeScript
- Size: 104 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# modal
弹窗模块，需要promise polyfill
demo
```sh
npm i @eightfeet/modal -S
```
```javascript
import Modal from '@eightfeet/modal';
const myModal = new Modal({
style: {
article: {
borderRadius: '0.5em',
backgroundColor: '#fff',
}
}
});
myModal.create({
article: '这是一个弹窗'
}).then(() => console.log('弹窗已打开'));
```
#### parame
| 参数 | 说明 | 是否必填 | 备注 | 类型 |
| ------------------------- | ---------------------------- | -------- | ------------------------------------------------------------ | -------- |
| id | 所创建弹窗的id | 否 | 不传可自动生成id（modal + 时间戳 + 100以内的随机数） | String |
| zIndex | modal的样式层级关系 | 否 | 默认100 | Number |
| emBase | em单位的基准像素 | 否 | 默认自动计算（emBase = document.clientWidth/24） | Number |
| parentId | 所挂载的父级ID用于做局部弹窗 | 否 | 默认挂在body下面，指定父级dom时将挂载在父级dom下，配合css实现局部弹窗 | String |
| closable | 是否可关闭 | 否 | 默认true | Boolean |
| shouldCloseOnOverlayClick | 是否点击蒙层关闭弹窗 | 否 | 默认false | Boolean |
| style | 弹窗样式 | 是 | 定义modal样式
{
overlay: 覆盖层,
wrap: 模块包裹层,
content: 内容区,
header: 头部,
article: 内容区,
close: 关闭按钮,
modify: 修饰器
},
modify修饰器 是一个数组，每个数组元素对应会创建一个 基于弹窗的绝对定位div层，用于修饰弹窗（参考case） | Object |
| animation | 弹窗动画 | 否 | {
form: 弹窗动画形式，参考animation附表,
duration：持续时长
} | Object |
| onCancel | 关闭弹窗 | | 关闭弹窗时的回调 | Function |
###### animation附表
| 参数 | 说明 | 备注 |
| ----------- | ------------------ | ---- |
| fadeInUp | 从底部向上淡入 | |
| fadeInDown | 从顶部向下淡入 | |
| fadeInLeft | 从左向右淡入 | |
| fadeInRight | 从右向左淡入 | |
| zoomIn | 从中心放大淡入 | 默认 |
| zoomInUp | 从底部向上放大淡入 | |
| zoomInDown | 从顶部向下放大淡入 | |
| zoomInLeft | 从左向右放大淡入 | |
| zoomInRight | 从右向左放大淡入 | |
#### options
1. ##### create: ƒ (elements, doNotRemove) 创建弹窗
```typescript
/**
* @description 创建弹窗
* @param {{
* header: InnerHTML;
* article: InnerHTML;
* footer: InnerHTML;
* }} elements 弹窗元素
* @param {boolean} doNotRemove 是否移除弹窗
* @memberof Modal
*/
```
2. ##### hide: ƒ (doNotRemove) 隐藏弹窗
```typescript
/**
* @description 移除弹窗
* @memberof Modal
*/
```
3. ##### remove: ƒ () 移除弹窗
移除，将弹窗从body中移除。
4. ##### show: ƒ () 显示弹窗
显示页面弹窗，如果创建的弹窗隐藏时，调用此方法显示弹窗。
### createInlineStyles
createInlineStyles: 创建行内样式、
```javascript
import {createInlineStyles} from '@eightfeet/modal';
```
### saferInnerHtml
InnerHtml 具有一定安全隐患，saferInnerHtml用于过滤模版中的危险脚本，让你安全使用InnerHtml
避免XSS 攻击，默认InnerHtml都有通过saferInnerHtml转译为安全html
```javascript
import {saferInnerHtml} from '@eightfeet/modal';
const htmlStr = saferInnerHtml('
')
console.log(htmlStr); //
```
#### case
```javascript
import Modal from '@eightfeet/modal';
const newModal = new Modal({
id: 'modalId', // 所创建弹窗的id 不传可自动生成id（modal + 时间戳 + 100以内的随机数）
zIndex: 100, // modal的层级关系，默认100
emBase: 12, // 基准像素 parent Dom’s fontsize
animation: {
from: 'bottom',
duration: '2s'
}, // 启用动画 默认true
parentId: 'indom', // modal的创建位置，默认创建在body下
closable: false, // modal是否可关闭 默认true
shouldCloseOnOverlayClick: true, // 点击背景层关闭弹窗 默认false
style: { // 定义modal样式 {overlay: 覆盖层, content: 内容区, close: 关闭按钮}
overlay: {
backgroundColor: 'rgba(0,0,0,0.5)'
},
content: {
backgroundColor: 'rgba(100, 100, 100, 0.2)',
width: '19em',
// padding: '120px',
// 设置内容的层级关系
zIndex: 107
},
close: {
backgroundColor: 'rgba(0, 0, 0, 1)',
width: '1em',
height: '1em',
top: '-3em',
left: '50%'
},
// modify(修饰层)层级按照zIndex（modal的层级）以2为步值递增
modify: [
{
backgroundColor: 'rgba(0, 0, 255, 0.4)',
width: '120%',
left: '-10%',
height: '200px',
border: '1px solid rgba(0, 0, 255, 0.6)',
top: '-5em'
},
{
backgroundColor: 'rgba(0, 0, 255, 0.4)',
width: '130%',
left: '-15%',
height: '200px',
border: '1px solid rgba(0, 0, 255, 0.6)',
top: '-4em'
}
]
}
});
const btn = document.getElementById('exampleBtn');
btn.onclick = function(){
return newModal.create({
header:'
头部',
article: `
这是一段内容
`,
footer: `
确定
脚部
`
}, true).then(function(){
document.getElementById('close').onclick = function(){
console.log(document.getElementById('inp').value);
return newModal.hide(true);
};
});
}
```
## react
### Modal组件最佳实践
[demo](./ReactModal.tsx)
```typescript
setVisible(false)}
overlayStyle={{background: 'rgba(0, 255, 0, 0.5)'}}
>
这是一个弹窗
setVisible(false)}>关闭弹窗
```
### react hook
- ### case react useModal hook
```typescript
import { useRef, useCallback, useMemo, useEffect } from "react";
import Modal, { ModalParameters } from "@eightfeet/modal";
const useModal = (parameters: ModalParameters) => {
const ref = useRef();
useMemo(() => {
ref.current = new Modal(parameters);
}, [parameters]);
useEffect(() => {
return () => {
if (ref.current) {
const previousModal = ref.current;
if (document.getElementById(previousModal.state.id as string)) {
previousModal.remove();
}
}
}
}, [])
const createModal = useCallback((data) => {
return ref.current?.create(data) || Promise.reject('modal is not ready yet!');
}, []);
const hideModal = useCallback((doNotRemove) => {
return ref.current?.hide(doNotRemove) || Promise.reject('modal is not ready yet!');
}, []);
return { createModal, hideModal, modal: ref.current }
};
export default useModal;
```
- ### useModal
```typescript
import React from "react";
import useModal from "./hooks/useModal";
function App() {
const { createModal, hideModal } = useModal({
style: {
content: {
width: '301px'
}
}
});
return (
createModal({ article: "messages!" }).then(() =>
setTimeout(hideModal, 1000)
)
}
>
弹窗
);
}
export default App;
```