@xme-react/dropdown

下拉菜单/ 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)
// });