# common-input 使用说明

## 项目运行

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

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

3. npm run test （测试用例）

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

## InputBox 参数

```
  data:{
    "status": "edit" 
    ,"isActive": false //蓝线是否出现
    ,"placeHolder": "请输入" //input中的placeholder
    ,"defaultValue":"1111111" //input中的defaultvalue
    ,"readonly": false //只读态
    ,"errorStatus": false //报错
    ,"errorMsg":"saca99999sc" //报错信息，为空时不显示
    ,"PromptMsg":"" //报错信息，为空时不显示
    ,"istips": true  //渲染tips
    ,"hasInput":true  //直接控制是否渲染input框
    ,"showInput": false  //当为true时，并且selectDate有值时则不显示input框（hasinput = false）
    ,"selectDate":[
        // {
        //     "value":0
        //     ,"name":"查看详情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){
        console.log(dom)
    }//组件点击事件
    ,itemClose: function(event, item, index){
        self.itemClose(index)
        console.log(item)
    }//删除按钮回调
    ,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事件
    ,dropClick : function(event, status, dom){
        console.log(dom)
    }
```


## common-input 调用方法

1.安装npm组件包

```
npm install @beisen/common-input --save-dev
```

2.引用组件

  ```
import CommonInput from "@beisen/common-input"
  ```
3.传入参数

  ```
  data:{
    "status": "edit" 
    ,"isActive": false //蓝线是否出现
    ,"placeHolder": "请输入" //input中的placeholder
    ,"defaultValue":"1111111" //input中的defaultvalue
    ,"readonly": false //只读态
    ,"errorStatus": false //报错
    ,"errorMsg":"saca99999sc" //报错信息，为空时不显示
    ,"PromptMsg":"" //报错信息，为空时不显示
    ,"istips": true
    ,"hasInput":true
    ,"showInput": false
    ,"selectDate":[
        // {
        //     "value":0
        //     ,"name":"查看详情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){
        console.log(dom)
    }//组件点击事件
    ,itemClose: function(event, item, index){
        self.itemClose(index)
        console.log(item)
    }//删除按钮回调
    ,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事件
    ,dropClick : function(event, status, dom){
        console.log(dom)
    }
  render () {
      return (
        <CommonInput {...this.state.data} />
      )
    }
  ```