@beisen/base-button

base-button 使用说明

项目运行

• cnpm install 或 npm install cnpm使用教程

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

• npm run test （测试用例）

• 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"

• 传入参数

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

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