PopLayer 使用说明
项目简介
本项目包含提示弹层(http://nature.beisen.co/spec/1.5.2/#p=操作提示) 和确认弹层(http://nature.beisen.co/spec/1.5.2/#p=弹层) 两种类型的弹层。对本项目有任何疑问或建议,欢迎联系~(邮箱:wuzhe@beisen.com)
项目运行
-
cnpm install 或 npm install
-
npm run dev (开发环境打包、项目启动,默认端口 port:8080)
-
npm run build (生产环境打包)
PopLayer参数
{
"hidden": false, //是否使用组件
"popType": "0", /**共2种:为"0"时,是提示弹层;为"1"时,是确认弹层**/
"infoType": "4", /**共6种:为"0"时,是“对号”图标;为"1"时,是“叉号”图标;为"2"时,是“感叹号”图标;为"3"时,是“问号”图标;为"4"时,是“提示i”图标;为"5"时,是“灯泡”图标。详见 http://nature.beisen.co/spec/1.5.2/#p=操作提示 **/
"manualClose": true, //为true时手动关闭,false自动关闭,默认false自动关闭
"disappearTime": "3", //自动消失时间,默认为1.5s,可选值有1.5,3,5,10
"title": "天天向上", /**提示的标题**/
"content": ["这是第一条内容", "这是第二条内容"], /**带内容提示弹层的内容。**/
"sureButtonContent": "确定", //确定按钮内容
"cancleButtonContent": "取消", //取消按钮内容
"autoDirection":true, //确认弹层自适应位置
"direction":"left-down", /**
确认弹层方向,下列4种可选项:
1."left-top"
2."right-top"
3."left-down"
4."right-down"
**/
"target":"", /** 确认弹层位置判断依据的目标,只需要传一个空字符串即可 **/
"left":30, //提示弹层位置
"top":60 //提示弹层位置
}
PopLayer调用方法
1.安装npm组件包
npm install @beisen/PopLayer --save-dev
2.引用组件
import PopLayer from "@beisen/PopLayer"
3.传入参数
该参数为上述参数,传入方式使用: {...参数}
PopData: {
"hidden": false, //是否使用组件
"popType": "1",
/**共2种:为"0"时,是提示弹层;为"1"时,是确认弹层**/
"infoType": "4",
/**共6种:为"0"时,是“对号”图标;为"1"时,是“叉号”图标;为"2"时,是“感叹号”图标;为"3"时,是“问号”图标;为"4"时,是“提示i”图标;为"5"时,是“灯泡”图标**/
"manualClose": true, //为true时手动关闭,false自动关闭,默认false自动关闭
"disappearTime": "3", //自动消失时间,默认为1.5s,可选值有1.5,3,5,10
"title": "天天向上",
/**提示的标题**/
"content": ["这是第一条内容", "这是第二条内容"],
/**带内容提示弹层的内容。如果是不带内容的,就是一个空数组**/
"sureButtonContent": "确定",
"cancleButtonContent": "取消",
"autoDirection": true, //下拉菜单自适应位置
"direction": "left-down",
/**
MenuList spread direction,one of:
1."left-top"
2."right-top"
3."left-down"
4."right-down"
**/
"target": "",
"left": 300,
"top": 300
}
render() {
return (
<PopLayer {...this.state.PopData} />
)
}