@beisen/PopLayer

PopLayer

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@beisen/PopLayer
Minified + gzip package size for @beisen/PopLayer 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)

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

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.