@beisen-phoenix/mobile-popup

弹层容器组件

Usage no npm install needed!

<script type="module">
  import beisenPhoenixMobilePopup from 'https://cdn.skypack.dev/@beisen-phoenix/mobile-popup';
</script>

README

mobile-popup组件

弹层容器组件

分类

export { Drawer, Modal, Popover }

Drawer(抽屉组件)

props

name	description	type	default	是否为必传
visible	展示、隐藏	boolean	true	是
placement	弹出方向：`left` , `right` , `top` , `bottom`	string	left	否
width	容器宽度	string ,number	百分比	否
height	容器高度	string ,number	百分比	否
mask	是否带遮罩	boolean	true	否
maxHeight	最大高度	string	70%	否
onClose	关闭弹层的回调函数	function	onClose: () => { }	否

Modal(对话框)

props

name	description	type	default	是否为必传
visible	展示、隐藏	boolean	true	是
hasCloseBtn	是否带有关闭按钮	boolean	false	否
width	容器宽度	string ,number	百分比	否
height	容器高度	string ,number	百分比	否
mask	是否带遮罩	boolean	true	否
maxHeight	最大高度	string	70%	否
hasCloseBtn	是否显示关闭按钮	boolean		否
onClose	关闭弹层的回调函数	function	onClose: () => { }	否
maskCls	自定义遮罩classname	string	无	否
mainViewCls	自定义内容container className	string	无	否

Popover(气泡框弹层)

name	description	type	default	是否为必传
visible	展示、隐藏	boolean	true	是
hasArrow	是否显示上箭头	boolean	false	否
hotAreaOffset	触发弹层显示的元素位置信息,一般都是getBoundingClientRect函数的返回值	object	false	true
mask	是否带遮罩	boolean	true	否
style	popover内容的样式	object	{backgroundColor:'white',width:'60%',maxHeight:'70%',borderRadius:'4px'}	否
maskStyle	遮罩的样式	obj	undefined	否
prefixCls	自定义class	string	phoenix-popup	否
getPopoverContainer	自定义popover渲染到的节点	() => JSX	undefined	否
onClose	关闭弹层的回调函数	function	onClose: () => { }	否