@xme-react/dropdown NPM

下拉菜单/ DropDown

效果

使用

参数	类型	备注
title	String	选项名称，选项显示的文案，如果不传，默认使用`options`中默认选中的项
options	必填Array	选项列表
options0.text	String	选项名
options0.value	String	Number	选项值
options0.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)
// });

classnames console-polyfill es3ify-webpack-plugin es5-shim export-from-ie8 normalize.css prop-types react react-dom

1.0.1

5 years ago