# MScope 区间

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

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React, { Component } from "react";
import { constantsM, MScope, ScopeValue } from "@weapp/ui";

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

export default class Basic extends Component {

  handleChange = (value: ScopeValue) => {
    console.log(value)

  }
  render() {

    return (
      <div
        className={`${constantsM.uiMClsPrefix}_demo_scope`}
      >
        <div className={`list_item`}>
          <MScope showBottomLine={true} onChange={this.handleChange} />
        </div>
      </div>
    );
  }
}
```

### 设置输入范围

通过range属性设置可输入的范围

```jsx
import React, { Component } from "react";
import { constantsM, MScope, ScopeValue } from "@weapp/ui";

const range = {
  min: -10,
  max: 10
}
export default class Basic extends Component {

  handleChange = (value: ScopeValue) => {
    console.log(value)

  }
  render() {

    return (
      <div
        className={`${constantsM.uiMClsPrefix}_demo_scope`}
      >
        <div className={`list_item`}>
          <MScope range={range} onChange={this.handleChange} />
        </div>
      </div>
    );
  }
}
```

### value受控

```jsx
import React, { Component } from "react";
import { constantsM, MScope, ScopeValue } from "@weapp/ui";

export default class Basic extends Component {

  state = {
    value: {
      min: 0,
      max: 10
    },
    range: {
      min: -10,
      max: 10
    }
  }
  handleChange = (value: ScopeValue) => {
    console.log(value)
    this.setState({
      value
    })
  }
  render() {
    const { value, range } = this.state;
    return (
      <div
        className={`${constantsM.uiMClsPrefix}_demo_scope`}
      >
        <div className={`list_item`}>
          <MScope range={range} value={value} onChange={this.handleChange} />
        </div>
      </div>
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 当前数(受控值) | ScopeValue | F |  |
| defaultValue | 默认值 | ScopeValue | F |  |
| range | 范围 | ScopeValue | F |  |
| precision | 数据精度 | number | F |  |
| showBottomLine | 是否显示底线 | boolean | F |  |
| underline | 是否下划线样式 | boolean | F |  |
| disabled | 是否禁用 | boolean | F |  |
| readOnly | 是否只读 | boolean | F |  |
| divider | 分割符 | ReactElement \| ReactNode | F | - |
| onChange | onChange 事件回调 | (value: ScopeValue) => {} | F |  |
| onFocus | onFocus 事件回调 | (value: ScopeValue) => {} | F |  |
| onBlur | onBlur 事件回调 | (value: ScopeValue) => {} | F |  |
| inputProps | 输入框属性 | InputNumberProps | F |  |
| leftInputProps | 左侧输入框属性, 优先级高于inputProps | InputNumberProps | F |  |
| rightInputProps | 右侧输入框属性, 优先级高于inputProps | InputNumberProps | F |  |
