@beisen/PopLayer

PopLayer 使用说明

项目简介

本项目包含提示弹层(http://nature.beisen.co/spec/1.5.2/#p=操作提示) 和确认弹层(http://nature.beisen.co/spec/1.5.2/#p=弹层) 两种类型的弹层。对本项目有任何疑问或建议，欢迎联系~(邮箱：[e-mail])

项目运行

1. cnpm install 或 npm install

2. npm run dev （开发环境打包、项目启动，默认端口 port:8080）

3. 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} />
  )
}