@beisen-platform/pop-layer
Last updated 9 months ago by beisencorp .
ISC · Repository · Original npm · Tarball · package.json
$ cnpm install @beisen-platform/pop-layer 
SYNC missed versions from official npm registry.

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"))

Current Tags

  • 1.1.20                                ...           latest (9 months ago)

30 Versions

  • 1.1.20                                ...           9 months ago
  • 1.1.19                                ...           9 months ago
  • 1.1.18                                ...           9 months ago
  • 1.1.17                                ...           9 months ago
  • 1.1.16                                ...           9 months ago
  • 1.1.15                                ...           9 months ago
  • 1.1.14                                ...           10 months ago
  • 1.1.13                                ...           10 months ago
  • 1.1.12                                ...           a year ago
  • 1.1.11                                ...           a year ago
  • 1.1.10                                ...           a year ago
  • 1.1.9                                ...           a year ago
  • 1.1.8                                ...           a year ago
  • 1.1.7                                ...           a year ago
  • 1.1.6                                ...           a year ago
  • 1.1.5-rc.1                                ...           a year ago
  • 1.1.5                                ...           a year ago
  • 1.1.4                                ...           a year ago
  • 1.1.3-rc.4                                ...           a year ago
  • 1.1.3-rc.1                                ...           a year ago
  • 1.1.3                                ...           a year ago
  • 1.1.2                                ...           a year ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.38                                ...           a year ago
  • 1.0.35                                ...           2 years ago
  • 1.0.34                                ...           2 years ago
  • 1.0.33                                ...           2 years ago
  • 1.0.32                                ...           2 years ago
  • 1.0.31                                ...           2 years ago

Copyright 2014 - 2016 © taobao.org |