@beisen/pop-layer

PopLayer

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@beisen/pop-layer
Minified + gzip package size for @beisen/pop-layer in KB

Readme

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": "",
       onSure:() => {},
       onClose:() => {},
      //"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"))

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.