@beisen/base-button

BaseButton

Stats

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

Readme

base-button 使用说明

项目运行

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

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

  3. npm run test (测试用例)

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

base-button参数

{
  /** 按钮类型(string)。参数:
        1.默认: 'default'
        2.弱化按钮:'weaken'
        3.连接按钮:'link'
        4.打赏按钮: "reward"
    */
  bsStyle: 'default',

  /** 按钮尺寸(string)。参数:
      1.默认: 'default'
      2.小按钮:'small'
      3.块状按钮:'block'
  */
  bsSize: 'default',

  /** 是否选中(Boolean)。参数:
        1.默认未选中:false
        2.选中:true
    */
  active: true,

  /** 是否禁用(Boolean)。参数:
      1.默认不禁用:false
      2.禁用:true
  */
  disabled: true,

  /** 如果该字段有定义且非空,return(<a/>),否则return(</button>)*/
  href: '',

  /** 如果禁用出现tips的提示原因 */
  tipsReason: '禁用理由是balalalalalalalal',

  /** ToolTip的tipsDes属性 */
  tipsDes:'',

  /** 禁用后总是出现tips提示,只有disabled为true生效 */
  alwaysShowTips: true,

  /** 显示文本(string) */
  title: '测试11',

  /** 是否显示按钮 */
  hidden: false,

  /** 埋点数据 */
  dataUdt: 'id',

  /** 最大宽度,默认为"" ,超出后,超出的部门显示... */
  maxWidth: '20px',

  /** 点击后事件回调 **/
  onClick: function (target, onClick, btnInfo) {
    console.log(target);  //输出e
    console.log(onClick); //输出true
    console.log(btnInfo); //输出this.state
  }
}

base-button调用方法

1.安装npm组件包

npm install @beisen/base-button --save-dev

2.引用组件

import BaseButton from "@beisen/base-button"
  1. 传入参数

    该参数为上述参数,传入方式使用: {...参数}

    {
        "bsStyle":"default"
                            /**按钮类型(string)。参数:
                                1.默认:“default”
                                2.弱化按钮:“weaken”
                                3.连接按钮:“link”
                            **/
        ,"bsSize":"default"
                                    /**按钮尺寸(string)。参数:
                                        1.默认:“default”
                                        2.小按钮:“small”
                                        3.块状按钮:“block”
                                    **/
        ,"active":true
                                    /**是否选中(Boolean)。参数:
                                        1.默认未选中:false
                                        2.选中:true
                                    **/
        ,"disabled":true
                                    /**是否禁用(Boolean)。参数:
                                        1.默认不禁用:false
                                        2.禁用:true
                                    **/
        ,"href":""          /**如果该字段有定义且非空,return(<a/>),否则return(</button>)**/
        ,"title":"测试11"         /**显示文本(string)**/
        ,"hidden":false   //是否显示按钮
        ,"maxWidth":"20px"          //最大宽度,默认为"" ,超出后,超出的部门显示...
        ,"onClick": function(target,onClick,btnInfo) {
          console.log(target);  //输出e
          console.log(onClick); //输出true
          console.log(btnInfo); //输出this.state
        } /**点击后事件回调**/
    }
    
    render () {
            return (
                <BaseButton {...this.state.BaseData} />
            )
        }
    

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.