Negligible Psychological Misery

    @beisen/input-box

    0.0.106 • Public • Published

    input-box 使用说明

    项目运行

    1. cnpm install 或 npm install cnpm使用教程

    2. npm run dev (开发环境打包 port:8080)

    3. npm run test (测试用例)

    4. npm run build (生产环境打包)

    InputBox 调用方法

    1.安装npm组件包

    npm install @beisen/input-box --save-dev
    

    2.引用组件

    import InputBox from "@beisen/input-box"
    
    

    3.传入参数

    this.state = {
      		"status": "" //展示态为show,编辑态为其他
      		,"multiple":false //单选还是多选
      		,titleDate:{
      			"title": "dqwdqwdqw" //标题
      			,"required":true //必选
      			,"helpMsg":"caxsdcdscasdrefcwre<br/>gvhvk.bxnaw.ebcakwbc/wencwlekn"  //帮助信息,当为空时没有帮助信息
      			,"side": false //帮助信息是否支持html
      			,lablePos: true //label位置,true时在左边,false在上边
        			,lableTxt: true //label中文字对齐方式,true左对齐,false右对齐
      		}
      		,commonDate:{
      			"defaultValue":"11111"  //默认文字
      			// ,"placeHolder":"大家好" //input中placeholder
      			,"keepActive":false //保持蓝线一直存在
      			,"PromptMsg":"aaa" //提示信息,为空时不显示
      			,"errorStatus": true //报错
      			,"errorMsg":"" //报错信息,为空时不显示
      			,"disabled":false //input的disable状态,没有下划线
      			,"readonly":false //input的readonly状态
      		}
      		,showDate : {
      			"isLink": false //展示态是否是链接
      	  		,"linkValue": "http://www.baidu.com" //展示态链接地址
      	  		,"selfJump": true //链接跳转方式
      		}
      		,singleDate:{
      			"closeBtn": true //是否使用close按钮
      			,"arrowdownBtn": true //是否使用下拉图标
      			,"keepValue":false //用于带下拉,可以focue以及蓝线等,只是不可以输入值,通过defaultvalue改变
      			,"symbol":"" //符号,为空时没有符号
      			,handlerClick:function(event, status, value){console.log(value)}
      			,handlerFocus:function(event, status, value){console.log(value)}
      			,handlerChange:function(event, status, value){console.log("value:");console.log(value)}
      			,handlerBlur:function(event, status, value){console.log(value)}
      			,dropClick: function(event, value, dom){console.log(dom)}
      			,editClick: function(status){self.toggle(status);}
      			,handlerKeyup:function(event, status, value){}
      		}
      		,multiDate:{
      			"hasInput":false
      			,"showInput": true
      			,"istips":false
      			,"selectDate":[
                      {
                          "value":0
                          ,"name":"查看详情1"
                          ,"pname":"细节看撒1"
                          ,"isActive":false
                          ,"isChecked":true
                      },{
                          "value":1
                          ,"name":"查看详情2"
                          ,"pname":"细节看撒2"
                          ,"isActive":false
                          ,"isChecked":true
                      } ,{
                          "value":2
                          ,"name":"查看详情3"
                          ,"pname":"细节看撒3"
                          ,"isActive":false
                          ,"isChecked":true
                      }  ,{
                          "value":3
                          ,"name":"查看详情4"
                          ,"pname":"细节看撒4"
                          ,"isActive":false
                          ,"isChecked":true
                      }
                  ]//数据
      			,handlerClick: function(event, dom){
      				self.multipleClick(event)
      				console.log(dom)
      			}
      			,dropClick: function(event, status, dom){console.log(dom)}
      			,itemClose:function(event, item, index, selectDate){
      				self.itemClose(index)
      			}
      		}
      	}
    
    render () {
        return (
          <InputBox {...this.state} />
        )
      }
    

    Install

    npm i @beisen/input-box

    DownloadsWeekly Downloads

    106

    Version

    0.0.106

    License

    ISC

    Unpacked Size

    2.07 MB

    Total Files

    25

    Last publish

    Collaborators

    • beisencorp