PopLayer 使用说明
项目简介
本项目包含提示弹层(http://nature.beisen.co/spec/1.5.2/#p=操作提示) 和确认弹层(http://nature.beisen.co/spec/1.5.2/#p=弹层) 两种类型的弹层。对本项目有任何疑问或建议,欢迎联系~(邮箱:wuzhe@beisen.com)
项目运行
1. cnpm install 或 npm install
2. npm run dev (开发环境打包、项目启动,默认端口 port:8080)
4. npm run build (生产环境打包)
使用参数
"hidden": false, //是否使用组件
"popType": "0",
/**共2种:为"0"时,是提示弹层;为"1"时,是确认弹层**/
"infoType": "2",
/**共6种:为"0"时,是“对号”图标;为"1"时,是“叉号”图标;为"2"时,是“感叹号”图标;为"3"时,是“问号”图标;为"4"时,是“提示i”图标;为"5"时,是“灯泡”图标**/
"manualClose": true, //为true时手动关闭,false自动关闭,默认false自动关闭
"disappearTime": "10000", //自动消失时间,输入需要的毫秒数,如‘1000’
"title": "同一年份只能有一个启用的考勤期间",
"maxHeight": "", //自定义弹层最大高度,默认为300px
"showMask": false, //渲染一个透明的遮罩在poplayer下,默认为false
/**提示的内容**/
"content": [
"某某某字段不能填写在某某某字段前,序号",
" 某字段需大于2",
"提示巴拉巴拉一堆",
"第3排职位字段输入信息<a href='https://www.baidu.com'>错误</a>,序号1",
"工作地点字段为必填项,请完善,序号2",
"提示巴拉巴拉一堆",
"提示巴<span style='color:red'>拉巴拉一堆</span>",
"工作地点字段为必填项,请完善",
"提示巴拉巴拉一堆",
"提示巴拉巴拉一堆",
"提示巴拉巴拉一堆",
"提示巴拉巴拉一堆",
"工作地点字段为必填项,请完善,序号工作"],
/**带内容提示弹层的内容。如果是不带内容的,就是一个空数组**/
"sureButtonContent": "确定",//当popType属性为1时(确认弹层),确定按钮内容,默认内容为确定
"cancleButtonContent": "取消",//当popType属性为1时(确认弹层),确定按钮内容,默认内容为取消
"autoDirection": false, //下拉菜单自适应位置,false时"left-down"
"direction": "right-down",//弹框位置,默认"left-top"
/**
MenuList spread direction,one of:
1."left-top"
2."right-top"
3."left-down"
4."right-down"
**/
"target": "",
//"left": -260, //弹层显示left位置
//"top": 21 //弹层显示right位置
PopLayer调用方法
1.安装npm组件包
npm install @beisen/pop-layer --save-dev
2.引用组件
import PopLayer from "@beisen/pop-layer"
3.传入参数
该参数为上述参数,传入方式使用: {...参数}
class App extends Component {
constructor(props) {
super(props);
this.state = {
"hidden": false, //是否使用组件
"popType": "0",
/**共2种:为"0"时,是提示弹层;为"1"时,是确认弹层**/
"infoType": "2",
/**共6种:为"0"时,是“对号”图标;为"1"时,是“叉号”图标;为"2"时,是“感叹号”图标;为"3"时,是“问号”图标;为"4"时,是“提示i”图标;为"5"时,是“灯泡”图标**/
"manualClose": true, //为true时手动关闭,false自动关闭,默认false自动关闭
"disappearTime": "10000", //自动消失时间,输入需要的毫秒数,如‘1000’
"title": "同一年份只能有一个启用的考勤期间",
"maxHeight": "", //自定义弹层最大高度,默认为300px
"showMask": false, //渲染一个透明的遮罩在poplayer下,默认为false
/**提示的内容**/
"content": [
"某某某字段不能填写在某某某字段前,序号",
" 某字段需大于2",
"提示巴拉巴拉一堆",
"第3排职位字段输入信息<a href='https://www.baidu.com'>错误</a>,序号1",
"工作地点字段为必填项,请完善,序号2",
"提示巴拉巴拉一堆",
"提示巴<span style='color:red'>拉巴拉一堆</span>",
"工作地点字段为必填项,请完善",
"提示巴拉巴拉一堆",
"提示巴拉巴拉一堆",
"提示巴拉巴拉一堆",
"提示巴拉巴拉一堆",
"工作地点字段为必填项,请完善,序号工作"],
/**带内容提示弹层的内容。如果是不带内容的,就是一个空数组**/
"sureButtonContent": "确定",//当popType属性为1时(确认弹层),确定按钮内容,默认内容为确定
"cancleButtonContent": "取消",//当popType属性为1时(确认弹层),确定按钮内容,默认内容为取消
"autoDirection": false, //下拉菜单自适应位置,false时"left-down"
"direction": "right-down",//弹框位置,默认"left-top"
/**
MenuList spread direction,one of:
1."left-top"
2."right-top"
3."left-down"
4."right-down"
**/
"target": "",
//"left": -260, //弹层显示left位置
//"top": 21 //弹层显示right位置
}
this._setProps = this._setProps.bind(this);
this.onSure = this.onSure.bind(this);
this.onClose = this.onClose.bind(this);
}
// 点击确定按钮触发事件
onSure(obj) {
console.log(obj)
}
//点击取消按钮触发事件
onClose(obj) {
console.log(obj)
}
//点击按钮控制poplayer显示
_setProps() {
this.state.hidden = !this.state.hidden;
this.setState(this.state);
}
render() {
return (
<div style={{"position": "absolute","top": "100px","left": "calc(50% - 170px)"}}>
<PopLayer {...this.state} showHide={this._setProps} onSure={this.onSure} onClose={this.onClose} />
<button onClick={this._setProps} >点我</button>
</div>
)
}
}
render(<App />, document.getElementById("content"))