CommonInput 使用说明

项目运行

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

2. npm run dev （开发环境打包 port:8080）

3. npm run test （测试用例）

4. npm run build （生产环境打包）

InputBox 参数

  data:{
        "status": "show" 
        ,"isActive": false //蓝线是否出现
        ,"placeHolder": "请输入" //input中的placeholder
        ,"defaultValue":"技术" //input中的defaultvalue
        ,"readonly": false //只读态
        ,"errorStatus": false //报错
        ,"errorMsg":"sacasc" //报错信息，为空时不显示
        ,"PromptMsg":"" //报错信息，为空时不显示
        ,"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){
              console.log(event.target)
            }//组件点击事件
            ,itemClose: function(event, item, index, selectDate){
              self.itemClose(index)
            }//删除按钮回调
            ,inputChange: function(event, status, value){
                console.log(value)
            }//input的change事件
            ,inputClick: function(event, status, value){
                console.log(value)
                self.inputClick();
            }//input的点击事件
            ,inputBlur: function(event, status, value){
                console.log(value)
                self.inputBlur();
            }//input的blur事件
      }

CommonInput 调用方法

1.安装npm组件包

npm install @beisen/CommonInput --save-dev

2.引用组件

import CommonInput from "@beisen/CommonInput"

3.传入参数

data:{
      "status": "show" 
      ,"isActive": false //蓝线是否出现
      ,"placeHolder": "请输入" //input中的placeholder
      ,"defaultValue":"技术" //input中的defaultvalue
      ,"readonly": false //只读态
      ,"errorStatus": false //报错
      ,"errorMsg":"sacasc" //报错信息，为空时不显示
      ,"PromptMsg":"" //报错信息，为空时不显示
      ,"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){
            console.log(event.target)
          }//组件点击事件
          ,itemClose: function(event, item, index, selectDate){
            self.itemClose(index)
          }//删除按钮回调
          ,inputChange: function(event, status, value){
              console.log(value)
          }//input的change事件
          ,inputClick: function(event, status, value){
              console.log(value)
              self.inputClick();
          }//input的点击事件
          ,inputBlur: function(event, status, value){
              console.log(value)
              self.inputBlur();
          }//input的blur事件
    }
render () {
    return (
      <CommonInput {...this.state.data} />
    )
  }