@beisen/text-box

Textbox

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@beisen/text-box
Minified + gzip package size for @beisen/text-box in KB

Readme

Textbox 使用说明

项目运行

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

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

  3. npm run test (测试用例)

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

Textbox 参数

const props = {
  showTag:'测试测试',
  defaultValue:'acdscasdfsdfsdfsdfsdfsdfds',
  placeHolder:'',
  errorStatus:false,
  showText:'1111',
  errorMsg:'出错了~~~!',
  symbol:'',        //符号,为空时没有符号
  helpMsg:'dsadsa',
  sideTip:false,    //toolTip是否左右显示
  hiddenTip:false,  //toolTip是否显示
  hidden:false,
  hasClosebtn:true, //框内删除符号 默认存在
  disabled:false,
  readonly:true,
  required:true,
  lablePos: true,   //label位置,true时在左边,false在上边
  lableTxt: false,  //label中文字对齐方式,true左对齐,false右对齐
  onClick:function(event, status, value){},
  onFocus:function(event, status, value){},
  onChange:function(event, status, value){console.log(event.target)},
  onBlur:function(event, status, value){console.log(value)}
}

Textbox 调用方法

1.安装npm组件包

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

2.引用组件

import Textbox from "@beisen/text-box"

3.传入参数

data:{
    "showTag":"测试测试"
          ,"defaultValue":"acdscasdfsdfsdfsdfsdfsdfds"
          ,"placeHolder":""
          ,"errorStatus":false
          ,"showText":"1111"
          ,"errorMsg":"出错了~~~!"
          ,"symbol":"" //符号,为空时没有符号
          ,"helpMsg":"dsadsa"
          ,"sideTip":false //toolTip是否左右显示
      ,"hiddenTip":false //toolTip是否显示
          ,"hidden":false
          ,"hasClosebtn":true //框内删除符号 默认存在
          ,"disabled":false
          ,"readonly":true
          ,"required":true
          ,"lablePos": true //label位置,true时在左边,false在上边
    ,"lableTxt": false //label中文字对齐方式,true左对齐,false右对齐
          ,onClick:function(event, status, value){}
          ,onFocus:function(event, status, value){}
          ,onChange:function(event, status, value){console.log(event.target)}
          ,onBlur:function(event, status, value){console.log(value)}
  }
render () {
    return (
      <Textbox {...this.state.data} />
    )
  }

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.