下拉菜单/ DropDown

效果

使用

| 参数 | 类型 | 备注 | | :-------- | --------:| :------: | | title | String | 选项名称，选项显示的文案，如果不传，默认使用options中默认选中的项 | | options | 必填Array | 选项列表 | | options[0].text | String | 选项名 | | options[0].value | String|Number | 选项值 | | options[0].selected | Boolean | 当前选项是否默认选中，优先级比title高 | | onChange | Function | 点击下拉菜单后的回调，返回当前选中的选项数据 | | cls | Object | 自定义样式的class 包含{container: '整个dropdown容器的样式', trigger: 'dropdown已选中的样式', list: '下拉菜单列表的样式', item: '单个下拉菜单项的样式'} | | excludeSelected | Boolean | 下拉菜单中排除已经选中的项 默认false| | disableSelectActive | Boolean | 选择下拉菜单时，不要反馈到下拉菜单触发点 默认false|

import React from 'react'
import ReactDOM from 'react-dom'
import DropDown from 'DropDown'
import styles from './index.scss'

const OPTIONS = [
  {text: '选项1', value: 1, selected: true},
  {text: '选项2', value: 2},
  {text: '选项3', value: 3}
]

function onChange (data) {
  console.log(data)
}

const cls = {
  container: styles.dropdown,
  trigger: styles.dropdown_trigger,
  list: styles.dropdown_list,
  item: styles.dropdown_item
}

// window.addEventListener('DOMContentLoaded', () => {
ReactDOM.render((
  <DropDown onChange={onChange} excludeSelected cls={cls} title="developer"
            options={OPTIONS} />), document.body)
// });