0.1.1 • Published 3 years ago
shinemo-multidropdown v0.1.1
下拉菜单/ 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)
// });
0.1.1
3 years ago