# MButton 按钮

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/button/freepass)
- 平台：移动端
- 维护者：揭志胜
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MButton]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React, { Component } from 'react';
import { MButton, constantsM } from '@weapp/ui';

const prefixCls = `${constantsM.uiMClsPrefix}-demo-btn`;

class ButtonDemo extends Component {
  handleBeforeClick = () => {
    console.log('before click called');
    return new Promise((resolve, reject) => {
      console.log('interrupt click');
      reject();
    });
  }
  handleClick = () => {
    console.log('click callback');
  }
  render() {
    return (
      <div className={prefixCls}>
        <h4>默认</h4>
        <MButton type="default">基础按钮</MButton>
        <MButton type="primary">主要按钮</MButton>
        <MButton type="danger">危险按钮</MButton>
        <h3>行内</h3>
        <MButton inline type="default">基础按钮</MButton>
        <MButton inline type="primary">主要按钮</MButton>
        <MButton inline type="danger">危险按钮</MButton>
        <h3>设置圆角</h3>
        <MButton radius inline type="default">次要按钮</MButton>
        <MButton radius inline type="primary">主要按钮</MButton>
        <MButton radius inline type="danger">危险按钮</MButton>
        <h3>尺寸</h3>
        <MButton inline size="large" type="default">large</MButton>
        <MButton inline size="middle" type="primary">middle</MButton>
        <MButton inline size="small" type="danger">small</MButton>
      </div>
    );
  }
}

export default ButtonDemo;
```

### 其它按钮

其它按钮

```jsx
import { Browser, BrowserValueType, constants } from '@weapp/ui';
import { inject, observer } from 'mobx-react';
import {
  MockDataBrowserBase,
  listDataParams,
  mockListData,
  mockCompleteData,
} from '../../browser/pc/MockData';

const prefixCls = `${constants.uiPcClsPrefix}-demo-browser`;

const readOnlyAssoProps = {
  readOnly: true,
};

const disabledAssoProps = {
  disabled: true
};

const disabledHideMoredisabledAssoProps = {
  disabled: true,
  disabledHideMore: true,
}

const defaultValue = mockCompleteData;

@inject('browserDemoStore')
@observer
class BrowserDemo extends MockDataBrowserBase {
  state = {
    selectedData: [],
    defaultSelectedData: [
      {
        id: `id_3`,
        user: `用户_3`,
        time: `2018-09-03`,
        name: `用户_3`,
        "avatar": {
          "previewPath": "/api/file/preview?type=redirect&fileId=",
          "appPreviewPath": "/api/app/file/preview?type=redirect&fileId=",
          "name": `用户_3`
        },
        disabledDelete: true,
      },
    ],
  }
  assoProps = {
    defaultHideMore: false,
    // wrapDisplay: true,
  }
  handleChange = (data: BrowserValueType) => {
    this.setState({ selectedData: data });
    (this.props as any).browserDemoStore?.handleChange?.(data);
    console.log('data change', data);
  }
  render() {
    const { browserDemoStore } = this.props as any;
    const { selectedData, defaultSelectedData } = this.state;
    return (
      <div className={prefixCls}>

        <h3>已选数据换行显示</h3>
        <Browser
          type="demo"
          module="common"
          multiple
          browserAssociativeProps={{
            wrapDisplay: true
          }}
          dataParams={listDataParams}
          fetchData={this.mockFetchData}
        />
      </div>
    );
  }
}

export default BrowserDemo;
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| type | 按钮类型，可选值为 `primary` `ghost` `warning` | string | 否 |  |
| size | 按钮大小，可选值为 `large`、`small` （主要为 padding 大小） | string | 否 |  |
| disabled | 禁用 | boolean | 否 | false |
| radius | 设置圆角 | boolean | 否 | false |
| inline | 是否设置为整行按钮（是否默认宽度 100%） | boolean | 否 | false |
| onClick | 点击事件 | (e, this) => void; | 否 |  |
| onBeforeClick | 点击事件方法执行前钩子 | (this) => void; | 否 |  |
| onAfterClick | 点击事件方法执行后钩子 | (this) => void; | 否 |  |
