# MSelect 下拉框

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

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { Component } from 'react';
import { constantsM, Icon, MInput, MSelect, SelectOptionData, SelectValueType, SingleType } from '@weapp/ui';
import { getLabel } from '@weapp/utils'

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

type SelectDemoState = {
  value: SelectValueType;
  defaultValue: SelectValueType;
  visible: boolean;
  largeOptions: SelectOptionData[];
}

const options = [
  { id: '1', content: '选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一', color: '#5D9CEC' },
  { id: '2', content: '选项二', color: '#FF4D4F' },
  { id: '3', content: '选项三', color: '#52C41A' },
  { id: '4', content: '禁用项', disabled: true }
];

export default class MSelectDemo extends Component<any, SelectDemoState> {
  constructor(props: any) {
    super(props);
    const largeOptions = [];
    for (let i = 0; i < 100; i++) {
      largeOptions.push({
        id: `${i}`,
        content: `选项${i + 1}`
      });
    }
    this.state = {
      value: '2',
      visible: false,
      defaultValue: "3",
      largeOptions
    };
  }

  handleChange = (v: SelectValueType) => {
    console.log('handleChange', v)
    // this.setState({ value: v })
  };

  handleSelect = (value: SingleType<SelectValueType>, option: SelectOptionData) => {
    console.log('selected:', value, option);
    this.setState({
      value
    })
  }

  handleDeselect = (value: SingleType<SelectValueType>, option: SelectOptionData) => {
    console.log('deselected:', value, option);
  }

  customOptionRender = (option: SelectOptionData) => {
    console.log('option', option)
    const { content, color } = option;
    if (color) {
      return (
        <span style={{ color }}>{content}*</span>
      );
    }
    return (
      <span>{content}</span>
    );
  }

  customInputRender = (selectComponent: any) => {
    return (
      <MInput
        readOnly
        disabled={selectComponent.props.disabled}
        value={selectComponent.getCurrentName()}
        prefix="选择:"
        suffix={<Icon name="Icon-search" />}
        placeholder={selectComponent.props.placeholder || getLabel('15088', '请选择')}
      />
    );
  }

  render() {
    const { value, defaultValue } = this.state;
    return (
      <div className={prefixCls}>
        <h4>基本使用</h4>
        <p>使用广泛的基础单选(受控)</p>
        <MSelect
          data={options}
          value={value}
          placeholder="请选择"
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleChange}
        />
        <p>只读模式下-选项溢出可滚动(受控)</p>
        <MSelect
          data={options}
          value={value}
          readOnly
          placeholder="请选择"
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleChange}
        />
        <p>单选(受控,未设置onSelect,onChange事件,选项无法变动)</p>
        <MSelect
          data={options}
          value={value}
          placeholder="请选择"
        />
        <p>单选(非受控)</p>
        <MSelect
          data={options}
          placeholder="请选择"
        />

        <h4>选项可搜索</h4>
        <p>在基础单选中可搜索选项</p>
        <MSelect
          data={options}
          value={value}
          searchable
          placeholder="请选择"
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleChange}
        />
        <h4>可取消</h4>
        <p>可取消选中</p>
        <MSelect
          data={options}
          allowCancel
          placeholder="请选择"
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
        />

        <h4>只读状态</h4>
        <p>选择器不可用状态</p>
        <MSelect
          defaultValue={defaultValue}
          data={options}
          readOnly
        />

        <h4>禁用状态</h4>
        <p>选择器不可用状态</p>
        <MSelect
          defaultValue={defaultValue}
          data={options}
          disabled
        />

        <h4>带标题</h4>
        <p>弹出框头部带标题</p>
        <MSelect
          data={options}
          dropdownTitle="这里是标题"
          placeholder="请选择"
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
        />

        <h4>右侧弹出面板</h4>
        <p>下拉项展示在右侧弹出面板中</p>
        <MSelect
          data={options}
          dropdownType="dialog"
          placeholder="请选择"
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
        />

        <h4>自定义选项</h4>
        <p>自定义选项显示</p>
        <MSelect
          data={options}
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          customOptionRender={this.customOptionRender}
        />

        <h4>自定义输入框展示</h4>
        <MSelect
          data={options}
          allowCancel
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          customInputRender={this.customInputRender}
        />

        <h4>标签</h4>
        <p>标签样式</p>
        <MSelect
          data={options}
          value={value}
          optionType='tag'
          placeholder="请选择"
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleChange}
        />

        <h4>只读状态(不显示placeholder)</h4>
        <p>选择器不可用状态</p>
        <MSelect
          placeholder="只读状态下请选择"
          data={options}
          readOnly
        />

        <h4>只读状态(无数据，展示 placeholder)</h4>
        <p>选择器不可用状态</p>
        <MSelect
          data={options}
          readOnly
          readOnlyShowPlaceholder
          placeholder='请输入'
        />

        <h4>禁用状态(显示placeholder)</h4>
        <p>选择器不可用状态</p>
        <MSelect
          placeholder="禁用状态下请选择"
          defaultValue={defaultValue}
          data={options}
          disabled
        />

        <h4>右侧显示内容(isHoldRight)</h4>
        <p>有数据情况</p>
        <MSelect
          placeholder="请输入选择"
          defaultValue={defaultValue}
          data={options}
          isHoldRight
        />

        <p>无数据情况</p>
        <MSelect
          placeholder="请输入选择"
          data={options}
          isHoldRight
        />

        <p>禁用状态</p>
        <MSelect
          placeholder="请输入选择"
          data={options}
          isHoldRight
          disabled
        />

        <h4>只读状态</h4>
        <MSelect
          placeholder="只读状态下请选择"
          data={options}
          defaultValue={defaultValue}
          readOnly
          isHoldRight
        />

      </div>
    );
  }
}
```

### 下拉框的多选样式

```jsx
import React, { Component } from 'react';
import { constants, Icon, MInput, MSelect, SelectOptionData, SelectValueType, SingleType } from '@weapp/ui';
import { getLabel } from '@weapp/utils'

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

type SelectDemoState = {
  value: SelectValueType;
  valueArr: SelectValueType;
  valueObj: SelectValueType;
  visible: boolean;
  largeOptions: SelectOptionData[];
}

const options = [
  { id: '1', content: '选项一', color: '#5D9CEC' },
  { id: '2', content: '选项二', custom: 3, color: '#FF4D4F', extraContent: "额外的文本内容" },
  { id: '555', content: '无颜色选项', selectType: 'normal', color: '' },
  { id: '666', content: '白色选项', color: 'white', extraContent: "额外的文本内容", selectTagCls:"select-xpy" },
  { id: '777', content: '透明选项', color: 'transparent' },
  { id: '3', content: '选项三内容过长测试选项一内容过长测试选项一内容过长测试11选项一内容过长测试选项一内容过长测试选项一内容过长测试', color: '#52C41A', maxPrefixWidth: '60' },
  { id: '4', content: '禁用项', disabled: true }
];

const groupOptions = [
  { id: '11', content: '选项一', type: '1' },
  { id: '12', content: '禁用项', type: '1', disabled: true },
  { id: '13', content: '选项三', type: '1' },
  { id: '21', content: '选项四', type: '2' },
  { id: '31', content: '选项五', type: '3' },
];

export default class MSelectDemo extends Component<any, SelectDemoState> {
  constructor(props: any) {
    super(props);
    const largeOptions = [];
    for (let i = 0; i < 100; i++) {
      largeOptions.push({
        id: `${i}`,
        content: `选项${i + 1}`
      });
    }
    this.state = {
      value: ['1'],
      valueObj: [groupOptions[0]],
      valueArr: ['1'],
      visible: false,
      largeOptions
    };
  }

  handleArrChange = (v: SelectValueType) => {
    console.log('v', v)
    this.setState({ valueArr: v });
  }

  handleSelect = (value: SingleType<SelectValueType>, option: SelectOptionData) => {
    console.log('selected:', value, option);
  }

  handleDeselect = (value: SingleType<SelectValueType>, option: SelectOptionData) => {
    console.log('deselected:', value, option);
  }

  customOptionRender = (option: SelectOptionData) => {
    console.log('option', option)
    const { content, color } = option;
    const whiteList = ['white', 'transparent']
    if (color) {
      let resultColor = whiteList.includes(color) ? '#333333' : color
      return (
        <span style={{ color: resultColor }}>{content}*</span>
      );
    }
    return (
      <span>{content}</span>
    );
  }

  customInputRender = (selectComponent: any) => {
    return (
      <MInput
        readOnly
        disabled={selectComponent.props.disabled}
        value={selectComponent.getCurrentName()}
        prefix="选择:"
        suffix={<Icon name="Icon-search" />}
        placeholder={selectComponent.props.placeholder || getLabel('15088', '请选择')}
      />
    );
  }

  customInputContentRender = (ele: React.ReactNode) => {
    return <div style={{
      display: 'flex',
      flexWrap: 'wrap',
      flex: '1 1',
      maxWidth: '100%'
    }}>框内内容复写{ele}</div>
  }

  customPrefixRender = (value: any, type?: string) => {
    if (type === 'selectedValues') {
      return <div key={value.id}>已选icon</div>
    } else if (type === 'options') {
      return <div key={value.id}>选项icon</div>
    } else {
      return <div key={value.id}>其他</div>
    }
  }

  render() {
    const { valueArr, largeOptions } = this.state;
    return (
      <div className={prefixCls}>
        <h4>基本使用</h4>
        <p>可以选择多个选项(受控)</p>
        <MSelect
          data={options}
          multiple
          value={valueArr}
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
        />

        <p>可以选择多个选项(受控,未注册onSelect,onChange事件,选项无法变动)</p>
        <MSelect
          data={options}
          multiple
          value={valueArr}
        />

        <h4>大批量数据下拉框</h4>
        <p>下拉框选项超过十项显示滚动条</p>
        <MSelect
          data={largeOptions}
          multiple
          allowSelectAll
          showSearch
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
        />

        <h4>带标题</h4>
        <p>弹出框头部带标题</p>
        <MSelect
          data={options}
          multiple
          dropdownTitle="这里是标题"
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
        />

        <h4>右侧弹出面板</h4>
        <p>下拉项展示在右侧弹出面板中</p>
        <MSelect
          data={options}
          multiple
          dropdownType="dialog"
          placeholder="请选择"
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
        />

        <h4>自定义选项</h4>
        <p>自定义选项显示</p>
        <MSelect
          data={options}
          multiple
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          customOptionRender={this.customOptionRender}
        />

        <h4>自定义输入框展示</h4>
        <MSelect
          data={options}
          multiple
          allowCancel
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          customInputRender={this.customInputRender}
        />
        <h4>标签</h4>
        <p>标签样式(单选)</p>
        <MSelect
          data={options}
          optionType='tag'
          placeholder="请选择"
          showDefaultWrap
          customPrefixRender={this.customPrefixRender}
        />

        <h4>标签</h4>
        <p>标签样式(表单只读对齐行高)</p>
        <MSelect
          data={options}
          value={['1']}
          optionType='tag'
          placeholder="请选择"
          showDefaultWrap
          readOnly
          readOnlyLineHeightStandard
        />

        <p>标签样式-多选(表单只读对齐行高)</p>
        <MSelect
          data={options}
          value={['1', '2', '3', '4']}
          optionType='tag'
          placeholder="请选择"
          showDefaultWrap
          readOnly
          multiple
          readOnlyLineHeightStandard
        />

        <p>标签样式-复写内容区</p>
        <MSelect
          data={options}
          optionType='tag'
          placeholder="请选择"
          customInputContentRender={this.customInputContentRender}
        />

        <h4>标签-居右</h4>
        <p>标签样式(单选-isHoldRight)</p>
        <MSelect
          data={options}
          optionType='tag'
          placeholder="请选择"
          isHoldRight
        />

        <h4>标签-居右</h4>
        <p>标签样式(只读-isHoldRight)</p>
        <MSelect
          data={options}
          optionType='tag'
          placeholder="请选择"
          isHoldRight
          value={['1']}
          readOnly
        />
        <h4>竖向排列</h4>
        <p>竖向排列-居左</p>
        <MSelect
          data={options}
          multiple
          value={valueArr}
          showDefaultWrap
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
          vertical
        />
        <p>竖向排列-居右</p>
        <MSelect
          data={options}
          multiple
          isHoldRight
          value={valueArr}
          showDefaultWrap
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
          vertical
        />
        <p>竖向排列-居左-只读</p>
        <MSelect
          data={options}
          multiple
          value={valueArr}
          showDefaultWrap
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
          vertical
          readOnly
        />
        <p>竖向排列-居右-只读</p>
        <MSelect
          data={options}
          multiple
          isHoldRight
          value={valueArr}
          showDefaultWrap
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
          vertical
          readOnly
        />
        <p>竖向排列-居左-禁用</p>
        <MSelect
          data={options}
          multiple
          value={valueArr}
          showDefaultWrap
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
          vertical
          disabled
        />
        <p>竖向排列-居右-禁用</p>
        <MSelect
          data={options}
          multiple
          isHoldRight
          value={valueArr}
          showDefaultWrap
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
          vertical
          disabled
        />
        <p>竖向排列-标签居左</p>
        <MSelect
          data={options}
          multiple
          value={valueArr}
          showDefaultWrap
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
          vertical
          optionType='tag'
        />
        <p>竖向排列-标签居右</p>
        <MSelect
          data={options}
          multiple
          isHoldRight
          value={valueArr}
          showDefaultWrap
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
          vertical
          optionType='tag'
        />
        <p>竖向排列-标签居左-只读</p>
        <MSelect
          data={options}
          multiple
          value={valueArr}
          showDefaultWrap
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
          vertical
          readOnly
          optionType='tag'
        />
        <p>竖向排列-标签居右-只读</p>
        <MSelect
          data={options}
          multiple
          isHoldRight
          value={valueArr}
          showDefaultWrap
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
          vertical
          readOnly
          optionType='tag'
        />
        <p>竖向排列-标签居左-禁用</p>
        <MSelect
          data={options}
          multiple
          value={valueArr}
          showDefaultWrap
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
          vertical
          disabled
          optionType='tag'
        />
        <p>竖向排列-标签居右-禁用</p>
        <MSelect
          data={options}
          multiple
          isHoldRight
          value={valueArr}
          showDefaultWrap
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
          vertical
          disabled
          optionType='tag'
        />
        <h4>标签</h4>
        <p>标签样式(多选)</p>
        <MSelect
          data={options}
          value={valueArr}
          multiple
          optionType='tag'
          placeholder="请选择"
          showDefaultWrap
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
          customPrefixRender={this.customPrefixRender}
        />

        <h4>标签-居右</h4>
        <p>标签样式(多选-isHoldRight)</p>
        <MSelect
          data={options}
          multiple
          optionType='tag'
          placeholder="请选择"
          isHoldRight
        />

        <h4>标签-居右</h4>
        <p>标签样式(只读多选-isHoldRight)</p>
        <MSelect
          data={options}
          multiple
          optionType='tag'
          placeholder="请选择"
          isHoldRight
          readOnly
          value={['1', '2']}
        />

        <h4>标签</h4>
        <p>标签样式(单选 禁用)</p>
        <MSelect
          data={options}
          value={['3']}
          optionType='tag'
          placeholder="请选择"
          disabled
          showDefaultWrap
        // readOnly
        />

        <h4>标签</h4>
        <p>标签样式(多选 禁用)</p>
        <MSelect
          data={options}
          value={['3']}
          multiple
          optionType='tag'
          placeholder="请选择"
          disabled
          showDefaultWrap
        // readOnly
        />

        <h4>标签</h4>
        <p>标签样式(单选 只读 无数据 不显示placeholder)</p>
        <MSelect
          data={options}
          optionType='tag'
          placeholder="请选择"
          readOnly
        />

        <h4>标签</h4>
        <p>标签样式(单选 只读)</p>
        <MSelect
          data={options}
          value={['3']}
          showDefaultWrap
          optionType='tag'
          placeholder="请选择"
          readOnly
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
        />

        <h4>标签</h4>
        <p>标签样式(单选 只读,允许换行)</p>
        <MSelect
          data={options}
          value={['3']}
          optionType='tag'
          placeholder="请选择"
          readOnly
          selectedWrap
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
        />

        <h4>标签</h4>
        <p>标签样式(多选 只读)</p>
        <MSelect
          data={options}
          value={['3']}
          multiple
          optionType='tag'
          placeholder="请选择"
          readOnly
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
        />

        <h4>标签</h4>
        <p>标签样式(多选 只读允许换行)</p>
        <MSelect
          data={options}
          value={['3', '1', '2']}
          multiple
          optionType='tag'
          placeholder="请选择"
          readOnly
          selectedWrap
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
        />

        <h4>标签</h4>
        <p>标签样式(多选 -  多个选项有间距)</p>
        <MSelect
          data={options}
          value={['3', '1', '2']}
          multiple
          optionType='tag'
          placeholder="请选择"
          readOnly
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
        />

        <h4>带搜索</h4>
        <p>选项列表顶部搜索(多选)</p>
        <MSelect
          data={options}
          value={valueArr}
          multiple
          searchable
          placeholder="请选择"
          onSelect={this.handleSelect}
          onDeselect={this.handleDeselect}
          onChange={this.handleArrChange}
        />

      </div>
    );
  }
}
```

### 弹出框适应横屏方向

```jsx
import { Component } from 'react';
import { constantsM, Icon, MInput, MSelect, SelectOptionData, SelectValueType, SingleType } from '@weapp/ui';
import { getLabel } from '@weapp/utils';

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

type SelectDemoState = {
  value: SelectValueType;
  defaultValue: SelectValueType;
  visible: boolean;
  largeOptions: SelectOptionData[];
};

const options = [
  { id: '1', content: '选项一', color: '#5D9CEC' },
  { id: '2', content: '选项二', color: '#FF4D4F' },
  { id: '3', content: '选项三内容过长测试选项一内容过长测试选项一内容过长测试11选项一内容过长测试选项一内容过长测试选项一内容过长测试', color: '#52C41A' },
  { id: '4', content: '禁用项', disabled: true },
];

const optionsMore = [
  { id: '1', content: '选项一', color: '#5D9CEC' },
  { id: '2', content: '选项二', color: '#FF4D4F' },
  { id: '3', content: '选项三', color: '#52C41A' },
  { id: '4', content: '选项四内容过长测试选项一内容过长测试选项一内容过长测试11选项一内容过长测试选项一内容过长测试选项一内容过长测试', color: '#52C41A' },
  { id: '5', content: '选项五', color: '#52C41A' },
  { id: '6', content: '选项六', color: '#52C41A' },
  { id: '7', content: '选项七', color: '#52C41A' },
];

const optionsLess = [
  { id: '1', content: '选项一', color: '#5D9CEC' },
  { id: '2', content: '选项二', color: '#FF4D4F' },
];

export default class MSelectDemo extends Component<any, SelectDemoState> {
  render() {
    return (
      <div className={prefixCls}>
        <h4>竖屏下弹出方式(顺时针)</h4>
        <MSelect
         
          data={options}
          placeholder='请选择'
          isHorizontal={true}
          horizontalDirection='clockwise'
        />
        <h4>竖屏下弹出方式(逆时针,默认)</h4>
        <MSelect
         
          data={options}
          placeholder='请选择'
          isHorizontal={true}
          horizontalDirection='anticlockwise'
        />

        <h4>竖屏下弹出方式(顺时针),多选项条件下</h4>
        <MSelect
         
          data={optionsMore}
          placeholder='请选择'
          isHorizontal={true}
          horizontalDirection='clockwise'
        />
        <h4>竖屏下弹出方式(逆时针,默认),多选项条件下</h4>
        <MSelect
         
          data={optionsMore}
          placeholder='请选择'
          isHorizontal={true}
          horizontalDirection='anticlockwise'
        />

        <h4>竖屏下弹出方式(顺时针),选项少的情况</h4>
        <MSelect
         
          data={optionsLess}
          placeholder='请选择'
          isHorizontal={true}
          horizontalDirection='clockwise'
        />
        <h4>竖屏下弹出方式(逆时针,默认),选项少的情况</h4>
        <MSelect
         
          data={optionsLess}
          placeholder='请选择'
          isHorizontal={true}
          horizontalDirection='anticlockwise'
        />
      </div>
    );
  }
}
```

### 允许清除

```jsx
import { Component } from 'react';
import { constantsM, Icon, MInput, MSelect, SelectOptionData, SelectValueType, SingleType } from '@weapp/ui';
import { getLabel } from '@weapp/utils';

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

const options = [
  { id: '1', content: '选项一', color: '#5D9CEC' },
  { id: '2', content: '选项二', color: '#FF4D4F' },
  { id: '3', content: '选项三', color: '#52C41A' },
  { id: '4', content: '禁用项', disabled: true },
];

export default class MSelectDemo extends Component<any, any> {
  state = {
    value: '2',
    valueArr: ['1'],
  };

  handleChange = (v: SelectValueType) => {
    this.setState({ value: v });
  };

  handleArrChange = (v: SelectValueType) => {
    console.log('v', v)
    this.setState({ valueArr: v });
  }
  render() {
    const { value, valueArr } = this.state;
    return (
      <div className={prefixCls}>
        <h4>基本使用</h4>
        <p>单选</p>
        <MSelect data={options} placeholder="请选择" allowClear />
        <p>单选(原先allowCancel效果)</p>
        <MSelect data={options} placeholder="请选择" allowCancel />
        <p>单选</p>
        <MSelect
         
          value={value}
          data={options}
          placeholder="请选择"
          allowClear
          onChange={this.handleChange}
        />
        <p>多选</p>
        <MSelect data={options} placeholder="请选择" multiple allowClear />
        <p>多选(原先allowCancel效果-不调整)</p>
        <MSelect data={options} placeholder="请选择" multiple allowCancel />

        <p>多选</p>
        <MSelect value={valueArr} data={options} onChange={this.handleArrChange}  placeholder="请选择" multiple allowClear />
      </div>
    );
  }
}
```

### 单多选模式

```jsx
import { Component } from 'react';
import { constantsM, Icon, MInput, MSelect, SelectOptionData, SelectValueType, SingleType } from '@weapp/ui';
import { getLabel } from '@weapp/utils';

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

const single = true;
const options = [
  { id: '1', content: '选项一' },
  { id: '2', content: '选项二' },
  { id: '3', content: '选项三' },
  { id: '7', content: '选项三4' },
  { id: '8', content: '选项三5' },
  { id: '9', content: '选项三6' },
  { id: '10', content: '选项三7' },
  { id: '11', content: '选项三8' },
  { id: '12', content: '选项三9' },
  { id: '13', content: '选项三10' },
  { id: '14', content: '选项三11' },
  { id: '15', content: '选项三12' },
  { id: '16', content: '选项三13' },
  { id: '17', content: '选项三14' },
  { id: '4', content: '单选一', single },
  { id: '5', content: '单选二', single },
  { id: '6', content: '单选三', single },
];

export default class MSelectDemo extends Component<any, any> {
  state = {
    value: '2',
    valueArr: ['1'],
    valueArrAll: ['1', '2', '3', '4', '5', '6'],
  };

  handleChange = (v: SelectValueType) => {
    this.setState({ value: v });
  };

  handleArrChange = (v: SelectValueType) => {
    this.setState({ valueArr: v });
  };
  handleArrAllChange = (v: SelectValueType) => {
    this.setState({ valueArrAll: v });
  };
  render() {
    const { value, valueArr, valueArrAll } = this.state;
    return (
      <div className={prefixCls}>
        <h4>单多选-基本使用</h4>
        <MSelect
         
          data={options}
          placeholder="请选择"
          multiple
          singleAndMultiple
        />

        <h4>单多选-可清除</h4>
        <MSelect
         
          data={options}
          placeholder="请选择"
          multiple
          allowClear
          singleAndMultiple
        />

        <h4>单多选-可全选</h4>
        <MSelect
         
          data={options}
          placeholder="请选择"
          multiple
          allowClear
          allowSelectAll
          singleAndMultiple
        />

         <h4>单多选-可全选,带搜索</h4>
        <MSelect
         
          data={options}
          placeholder="请选择"
          multiple
          allowClear
          searchable
          allowSelectAll
          singleAndMultiple
        />

        <h4>单多选-带标题</h4>
        <MSelect
         
          data={options}
          placeholder="请选择"
          multiple
          allowClear
          allowSelectAll
          singleAndMultiple
          dropdownTitle={'测试标题'}
        />

        <h4>单多选-受控</h4>
        <MSelect
         
          data={options}
          placeholder="请选择"
          multiple
          allowClear
          allowSelectAll
          singleAndMultiple
          value={valueArr}
          onChange={this.handleArrChange}
          dropdownTitle={'测试标题'}
        />

        <h4>单多选-受控(数据默认单多选混合时,多选生效)</h4>
        <MSelect
         
          data={options}
          placeholder="请选择"
          multiple
          allowClear
          allowSelectAll
          singleAndMultiple
          value={valueArrAll}
          onChange={this.handleArrAllChange}
          dropdownTitle={'测试标题'}
        />
      </div>
    );
  }
}
```

### 选项平铺模式(MSelector)

```jsx
import { Component } from 'react';
import { constantsM, Icon, MInput, MSelect, SelectOptionData, SelectValueType, SingleType } from '@weapp/ui';
import { getLabel } from '@weapp/utils';

const { MSelector } = MSelect;
const prefixCls = `${constantsM.uiMClsPrefix}-demo-selector`;

type SelectorDemoState = {
    value: SelectValueType;
    defaultValue: SelectValueType;
    visible: boolean;
    values: SelectValueType;
    largeOptions: SelectOptionData[];
};

const options = [
    { id: '1', content: '选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一' },
    { id: '2', content: '选项二', color: '#FF4D4F' },
    { id: '3', content: '选项三' },
    { id: '4', content: '选项四' },
];

const options1 = [
    { id: '1', content: '全部' },
    { id: '2', content: '近3年' },
    { id: '3', content: '近2年' },
    { id: '4', content: '近1年' },
    { id: '5', content: '近半年' },
    { id: '6', content: '近三个月' },
];

export default class MSelectorDemo extends Component<any, SelectorDemoState> {
    constructor(props: any) {
        super(props);
        const largeOptions = [];
        for (let i = 0; i < 100; i++) {
            largeOptions.push({
                id: `${i}`,
                content: `选项${i + 1}`,
            });
        }
        this.state = {
            visible: false,
            value: '',
            defaultValue: '3',
            values: '',
            largeOptions,
        };
    }

    handleChange = (v: SelectValueType) => {
        console.log('handleChange', v);
        this.setState({ value: v });
    };

    handleSelect = (value: SingleType<SelectValueType>) => {
        console.log('selected:', value);
    };

    handleChangeMuti = (v: SelectValueType) => {
        console.log('handleChange', v);
        this.setState({ values: v });
    };

    handleSelectMuti = (value: SingleType<SelectValueType>) => {
        console.log('selected:', value);
    };

    visibleChange = (visible: boolean) => {
        console.log('visible:', visible);
    };

    customOptionRender = (option: SelectOptionData) => {
        console.log('option', option);
        const { content, color } = option;
        if (color) {
            return <span style={{ color }}>{content}*</span>;
        }
        return <span>{content}</span>;
    };

    customInputRender = (selectComponent: any) => {
        return (
            <MInput
               
                readOnly
                disabled={selectComponent.props.disabled}
                value={selectComponent.getCurrentName()}
                prefix='选择:'
                suffix={<Icon name='Icon-search' />}
                placeholder={selectComponent.props.placeholder || getLabel('15088', '请选择')}
            />
        );
    };

    dropdownRender = (menu: React.ReactElement) => {
        console.log('menu', menu);
        return <div>内容复写{menu}</div>;
    };

    render() {
        const { value, defaultValue, values, largeOptions } = this.state;
        return (
            <div className={prefixCls}>
                <h4>基本使用</h4>
                <p>单选</p>
                <MSelector
                   
                    data={options}
                    value={value}
                    placeholder='请选择'
                    onSelect={this.handleSelect}
                    onChange={this.handleChange}
                    onVisibleChange={this.visibleChange}
                />
                <p>多选</p>
                <MSelector
                   
                    data={options}
                    value={values}
                    multiple
                    placeholder='请选择'
                    onSelect={this.handleSelectMuti}
                    onChange={this.handleChangeMuti}
                />
                <p>只读</p>
                <MSelector data={options} defaultValue={defaultValue} placeholder='请选择' readOnly />
                <p>禁用</p>
                <MSelector data={options} defaultValue={defaultValue} placeholder='请选择' disabled />
                <h4>多行布局</h4>
                <MSelector
                   
                    data={options}
                    value={value}
                    placeholder='请选择'
                    onSelect={this.handleSelect}
                    onChange={this.handleChange}
                    columns={3}
                />
                <h4>只展示字段内容(onlyShowDropContent)</h4>
                <MSelector
                   
                    data={options1}
                    value={value}
                    placeholder='请选择'
                    onSelect={this.handleSelect}
                    onChange={this.handleChange}
                    onlyShowDropContent
                />
                <h4>支持定高一行(singleRow)</h4>
                <MSelector
                   
                    data={options1}
                    value={value}
                    placeholder='请选择'
                    onSelect={this.handleSelect}
                    onChange={this.handleChange}
                    onDropVisibleChange={this.visibleChange}
                    onlyShowDropContent
                    singleRow
                />
                <h4>支持控制展示高度,滑动查看(dropLimitHeight)</h4>
                <MSelector
                   
                    data={largeOptions}
                    value={value}
                    placeholder='请选择'
                    onSelect={this.handleSelect}
                    onChange={this.handleChange}
                    columns={3}
                    onlyShowDropContent
                    singleRow
                    dropLimitHeight={128}
                />
                <h4>右侧显示内容(isHoldRight)</h4>
                <MSelector
                   
                    data={options1}
                    value={value}
                    placeholder='请选择'
                    onSelect={this.handleSelect}
                    onChange={this.handleChange}
                    columns={3}
                    isHoldRight
                />
                <h4>圆角样式</h4>
                <MSelector
                   
                    data={options1}
                    value={value}
                    placeholder='请选择'
                    onSelect={this.handleSelect}
                    onChange={this.handleChange}
                    columns={3}
                    onlyShowDropContent
                    singleRow
                    radius
                />
                <h4>自定义</h4>
                <p>自定义输入框展示</p>
                <MSelector
                   
                    data={options}
                    value={value}
                    placeholder='请选择'
                    onSelect={this.handleSelect}
                    onChange={this.handleChange}
                    customInputRender={this.customInputRender}
                />
                <p>自定义输入框右侧图标</p>
                <MSelector
                   
                    data={options}
                    value={value}
                    placeholder='请选择'
                    onSelect={this.handleSelect}
                    onChange={this.handleChange}
                    inputIcon={<Icon name='Icon-expression02' />}
                />
                <p>自定义下拉内容</p>
                <MSelector
                   
                    data={options}
                    value={value}
                    placeholder='请选择'
                    dropdownClassName='m-selector-custom'
                    dropdownRender={this.dropdownRender}
                />
                <p>自定义下拉选项显示</p>
                <MSelector
                   
                    data={options}
                    value={value}
                    placeholder='请选择'
                    onSelect={this.handleSelect}
                    onChange={this.handleChange}
                    customOptionRender={this.customOptionRender}
                />
            </div>
        );
    }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 当前数(受控值) | string[],SelectOptionsType | F | - |
| defaultValue | 当前数(默认值) | string[],SelectOptionsType | F | - |
| placeholder | value,defaultValue 为空下显示的默认内容，与原生 placeholder 效果相同，readOnly 下不显示其属性。 | string | F | - |
| readOnlyShowPlaceholder | 只读情况下无数据，展示 placeholder | boolean | F | false |
| data | 下拉选项数据 | SelectOptionsType | F | - |
| multiple | 是否多选 | boolean | F | false |
| customOptionRender | 自定义每一选项的渲染 | (option: OptionData) => ReactNode | F | - |
| customInputRender | 自定义输入框的渲染 | (selectComponent:any, selectedData: OptionsType) => ReactNode | F | - |
| open | 是否打开下拉框 ｜ boolean | F | false |  |
| defaultOpen | 是否默认打开下拉框 | boolean | F | false |
| alwaysTriggerSelect | 单选时允许选中已选数据并触发 onSelect 回调 | F | boolean | false |
| dropdownStyle | 自定义下拉框的样式 | CSSProperties | F | false |
| dropdownClassName | 自定义下拉框的 class | string | F | - |
| dropdownType | 弹出框类型,`popup`是从底部弹出，`dialog`是从右侧弹出面板 ｜ 'popup', 'dialog' | F | 'popup' |  |
| dropdownRender | 自定义下拉框 | (menu: React.ReactElement) => React.ReactElement | F | - |
| dropdownTitle | 自定义下拉框的标题 | ReactNode | F | - |
| disabled | 是否禁用 | boolean | boolean | F |
| onSelect | 选择数据时触发回调 | (value: string | SelectOptionData, option: SelectOptionData) => void | F |
| onDeselect | 取消选择数据时触发回调 ｜ (value: string | SelectOptionData, option: SelectOptionData) => void | F | - |
| onChange | 数据修改时触发回调 | (value: string[],SelectOptionsType, option: SelectOptionData | SelectOptionsType, event: SelectEvent) => void | F |
| onVisibleChange | 下拉框显示隐藏时触发回调 | (visible: boolean) => void | F | - |
| searchable | 是否开启下拉列表搜索 | boolean | false |  |
| vertical | 是否竖向排列 | boolean | F | - |
## MSelector 参数

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 当前数(受控值) | string[],SelectOptionsType | F | - |
| defaultValue | 当前数(默认值) | string[],SelectOptionsType | F | - |
| placeholder | value,defaultValue 为空下显示的默认内容，与原生 placeholder 效果相同，readOnly 下不显示其属性。 | string | F | - |
| data | 下拉选项数据 | SelectOptionsType | F | - |
| multiple | 是否多选 | boolean | F | false |
| customOptionRender | 自定义每一选项的渲染 | (option: OptionData) => ReactNode | F | - |
| customInputRender | 自定义输入框的渲染 | (selectComponent:any, selectedData: OptionsType) => ReactNode | F | - |
| defaultOpen | 是否默认打开下拉框 | boolean | F | false |
| dropdownClassName | 自定义下拉框的 class | string | F | - |
| dropdownRender | 自定义下拉框 | (menu: React.ReactElement) => React.ReactElement | F | - |
| disabled | 是否禁用 | boolean | boolean | F |
| onSelect | 选择数据时触发回调 | (value: string                                               \| SelectOptionData, option: SelectOptionData) => void | F | - |
| onDeselect | 取消选择数据时触发回调 | (value: string  \| SelectOptionData, option: SelectOptionData) => void | F | - |
| onChange | 数据修改时触发回调 | (value: string[],SelectOptionsType, option: SelectOptionData  \| SelectOptionsType, event: SelectEvent) => void | F | - |
| onVisibleChange | 下拉框显示隐藏时触发回调 | (visible: boolean) => void | F | - |
| onDropVisibleChange | 一行展示时下拉显示隐藏时触发回调 | (visible: boolean) => void | F | - |
| inputIcon | 输入框右侧图标复写 | RenderNode | F |  |
| columns | 控制一行几列布局 | number | F | - |
| onlyShowDropContent | 只展示下拉内容 | boolean | F | - |
| singleRow | 支持定高一行 | boolean | F | - |
| dropLimitHeight | 限制下拉内容最大高度 | number\|string | F | - |
| radius | 圆角样式 | boolean | F | - |
| isHoldRight | 输入框内容右对齐 | boolean | F | - |
