``` npm install --save react-widget-popup ```
npm install react-widget-popup
npm install --save react-widget-popup
`
使用
`jsx
import Popup from 'react-widget-popup';
import 'react-widget-popup/style';
export default function App(){
return (
style={{
left: 100,
top: 100
}}
>
test
)
}
`
$3
`ts
type statusTypes = 'unmounted' | 'exited' | 'entering' | 'entered' | 'exiting' ;
interface PopupProps extends React.HTMLAttributes {
/* 样式前缀 /
prefixCls?: string;
/* popup元素样式 /
style?: React.CSSProperties;
/* popupCSS样式名 /
className?: string;
/* popup根节点CSS样式名 /
rootClassName?: string;
/* popup根节点样式 /
rootStyle?: React.CSSProperties;
/* popup元素属性 /
rootProps?: React.HTMLAttributes;
/* 否显示popup(受控) /
visible?: boolean;
/* 使用fixed定位popup /
fixed?: boolean;
/* 初始不显示的情况下不渲染组件 /
lazy?: boolean;
/* 当destroyOnClose=false时，组件刷新时强制更新 /
forceRender?: boolean;
/* CSSTransition参数，参考：react-transition-group /
transition?: Partial;
/* 隐藏销毁弹组件 /
destroyOnClose?: boolean;
/* popup显示用于获取元素显示位置信息，大部分情况下建议直接用style /
getPosition?: (
dom: HTMLElement
) => {
top?: number | string;
left?: number | string;
right?: number | string;
bottom?: number | string;
};
/* 禁用mask /
disableMask?: boolean;
/* 是否开启遮罩层 /
mask?: boolean;
/* 遮罩层样式 /
maskStyle?: React.CSSProperties;
/* 遮罩层组件属性 /
maskProps?: React.HTMLAttributes;
/* 遮罩层样式名称 /
maskClassName?: string;
/* CSSTransition参数，参考：react-transition-group /
maskTransition?: Partial;
/* 内部使用 /
component?: React.ElementType;
/* 内部使用 /
maskComponent?: React.ElementType;
/* 内部使用 /
rootComponent?: React.ElementType;
/* 内部使用 /
wrapContent?: (node: React.ReactNode) => React.ReactNode;
}
`
$3
`js
{
prefixCls: "rw-popup",
style: {},
className: "",
rootClassName: "",
fixed: false,
lazy: true,
transition: {},
destroyOnClose: true,
disableMask: false,
mask: false,
maskStyle: {},
maskProps: {},
maskClassName: "",
maskTransition: {},
component: "div",
maskComponent: "div",
rootComponent: "div"
}
`
$3
`css
.rw-popup-root {
/ TODO /
}
.rw-popup {
position: absolute;
left: 0;
top: 0;
outline: 0;
}
.rw-popup-mask {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0.1;
}
.rw-popup-fixed,
.rw-popup-mask-fixed {
position: fixed;
}
``