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