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"

3. 传入参数

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

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