fix
parent
d87bb03b07
commit
6d2e05f1e0
|
@ -5,7 +5,7 @@ import KeyCode from '../_util/KeyCode'
|
||||||
import BaseMixin from '../_util/BaseMixin'
|
import BaseMixin from '../_util/BaseMixin'
|
||||||
const props = {
|
const props = {
|
||||||
rootPrefixCls: PropTypes.string,
|
rootPrefixCls: PropTypes.string,
|
||||||
eventKey: PropTypes.string,
|
eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||||
active: PropTypes.bool,
|
active: PropTypes.bool,
|
||||||
selectedKeys: PropTypes.array,
|
selectedKeys: PropTypes.array,
|
||||||
disabled: PropTypes.bool,
|
disabled: PropTypes.bool,
|
||||||
|
|
|
@ -26,7 +26,7 @@ export default {
|
||||||
openKeys: PropTypes.array.def([]),
|
openKeys: PropTypes.array.def([]),
|
||||||
openChange: PropTypes.func.def(noop),
|
openChange: PropTypes.func.def(noop),
|
||||||
rootPrefixCls: PropTypes.string,
|
rootPrefixCls: PropTypes.string,
|
||||||
eventKey: PropTypes.string,
|
eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||||
multiple: PropTypes.bool,
|
multiple: PropTypes.bool,
|
||||||
active: PropTypes.bool, // TODO: remove
|
active: PropTypes.bool, // TODO: remove
|
||||||
isRootMenu: PropTypes.bool,
|
isRootMenu: PropTypes.bool,
|
||||||
|
|
|
@ -5,11 +5,11 @@ export default {
|
||||||
multiple: PropTypes.bool,
|
multiple: PropTypes.bool,
|
||||||
defaultActiveFirst: PropTypes.bool,
|
defaultActiveFirst: PropTypes.bool,
|
||||||
visible: PropTypes.bool.def(true),
|
visible: PropTypes.bool.def(true),
|
||||||
activeKey: PropTypes.string,
|
activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||||
selectedKeys: PropTypes.arrayOf(PropTypes.string),
|
selectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
||||||
defaultSelectedKeys: PropTypes.arrayOf(PropTypes.string).def([]),
|
defaultSelectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).def([]),
|
||||||
defaultOpenKeys: PropTypes.arrayOf(PropTypes.string).def([]),
|
defaultOpenKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).def([]),
|
||||||
openKeys: PropTypes.arrayOf(PropTypes.string),
|
openKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
||||||
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||||
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
|
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
|
||||||
triggerSubMenuAction: PropTypes.string.def('hover'),
|
triggerSubMenuAction: PropTypes.string.def('hover'),
|
||||||
|
|
|
@ -210,7 +210,6 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
onDropdownVisibleChange (open) {
|
onDropdownVisibleChange (open) {
|
||||||
console.log('onDropdownVisibleChange', open)
|
|
||||||
if (open && !this._focused) {
|
if (open && !this._focused) {
|
||||||
this.clearBlurTime()
|
this.clearBlurTime()
|
||||||
this.timeoutFocus()
|
this.timeoutFocus()
|
||||||
|
@ -558,7 +557,7 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
getLabelFromProps (value) {
|
getLabelFromProps (value) {
|
||||||
return this.getLabelByValue(this.$slots.default, value)
|
return this.getLabelByValue(this.$slots.default || [], value)
|
||||||
},
|
},
|
||||||
|
|
||||||
getVLForOnChange (vls_) {
|
getVLForOnChange (vls_) {
|
||||||
|
|
|
@ -0,0 +1,100 @@
|
||||||
|
<script>
|
||||||
|
import Select, { Option } from '../index'
|
||||||
|
import '../assets/index.less'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
destroy: false,
|
||||||
|
value: '01',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onChange (e) {
|
||||||
|
let value
|
||||||
|
if (e && e.target) {
|
||||||
|
value = e.target.value
|
||||||
|
} else {
|
||||||
|
value = e
|
||||||
|
}
|
||||||
|
console.log('onChange', value)
|
||||||
|
this.value = value
|
||||||
|
},
|
||||||
|
|
||||||
|
onDestroy () {
|
||||||
|
this.destroy = 1
|
||||||
|
},
|
||||||
|
|
||||||
|
onBlur (v) {
|
||||||
|
console.log('onBlur', v)
|
||||||
|
},
|
||||||
|
|
||||||
|
onFocus () {
|
||||||
|
console.log('onFocus')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
render () {
|
||||||
|
if (this.destroy) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
return (<div style={{ margin: '20px' }}>
|
||||||
|
<div style={{ height: '150px' }}/>
|
||||||
|
|
||||||
|
<h2>Single Select</h2>
|
||||||
|
|
||||||
|
<div style={{ width: '300px' }}>
|
||||||
|
<Select
|
||||||
|
value={this.value}
|
||||||
|
placeholder='placeholder'
|
||||||
|
dropdownMenuStyle={{ maxHeight: '200px' }}
|
||||||
|
style={{ width: '500px' }}
|
||||||
|
onBlur={this.onBlur}
|
||||||
|
onFocus={this.onFocus}
|
||||||
|
allowClear
|
||||||
|
optionLabelProp='children'
|
||||||
|
optionFilterProp='text'
|
||||||
|
onChange={this.onChange}
|
||||||
|
firstActiveValue='2'
|
||||||
|
backfill
|
||||||
|
>
|
||||||
|
<Option value='01' text='jack' title='jack'>
|
||||||
|
<b
|
||||||
|
style={{
|
||||||
|
color: 'red',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
jack
|
||||||
|
</b>
|
||||||
|
</Option>
|
||||||
|
<Option value='11' text='lucy'>lucy</Option>
|
||||||
|
<Option value='21' disabled text='disabled'>disabled</Option>
|
||||||
|
<Option value='31' text='yiminghe'>yiminghe</Option>
|
||||||
|
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
|
||||||
|
return <Option key={i} text={String(i)}>{i}</Option>
|
||||||
|
})}
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>native select</h2>
|
||||||
|
<select
|
||||||
|
value={this.value}
|
||||||
|
style={{ width: '500px' }}
|
||||||
|
onChange={this.onChange}
|
||||||
|
>
|
||||||
|
<option value='01'>jack</option>
|
||||||
|
<option value='11'>lucy</option>
|
||||||
|
<option value='21' disabled>disabled</option>
|
||||||
|
<option value='31'>yiminghe</option>
|
||||||
|
{[1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
|
||||||
|
return <option value={i} key={i}>{i}</option>
|
||||||
|
})}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<button onClick={this.onDestroy}>destroy</button>
|
||||||
|
</p>
|
||||||
|
</div>)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -0,0 +1,66 @@
|
||||||
|
<script>
|
||||||
|
import Select, { Option } from '../index'
|
||||||
|
import '../assets/index.less'
|
||||||
|
import { fetch } from './tbFetchSuggest'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
data: [],
|
||||||
|
value: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onKeyDown (e) {
|
||||||
|
if (e.keyCode === 13) {
|
||||||
|
console.log('onEnter', this.state.value)
|
||||||
|
this.jump(this.state.value)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onSelect (value) {
|
||||||
|
console.log('select ', value)
|
||||||
|
this.jump(value)
|
||||||
|
},
|
||||||
|
|
||||||
|
jump (v) {
|
||||||
|
console.log('jump ', v)
|
||||||
|
// location.href = 'https://s.taobao.com/search?q=' + encodeURIComponent(v);
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchData (value) {
|
||||||
|
this.value = value
|
||||||
|
fetch(value, (data) => {
|
||||||
|
this.data = data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
render (h) {
|
||||||
|
const data = this.data
|
||||||
|
const options = data.map((d) => {
|
||||||
|
return <Option key={d.value}>{d.text}</Option>
|
||||||
|
})
|
||||||
|
return (<div>
|
||||||
|
<h2>suggest</h2>
|
||||||
|
|
||||||
|
<div onKeydown={this.onKeyDown}>
|
||||||
|
<Select
|
||||||
|
style={{ width: '500px' }}
|
||||||
|
combobox
|
||||||
|
value={this.value}
|
||||||
|
placeholder='placeholder'
|
||||||
|
defaultActiveFirstOption={false}
|
||||||
|
getInputElement={() => <input/>}
|
||||||
|
showArrow={false}
|
||||||
|
notFoundContent=''
|
||||||
|
onChange={this.fetchData}
|
||||||
|
onSelect={this.onSelect}
|
||||||
|
filterOption={false}
|
||||||
|
>
|
||||||
|
{options}
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -4,7 +4,7 @@ export function getValuePropValue (child) {
|
||||||
if ('value' in props) {
|
if ('value' in props) {
|
||||||
return props.value
|
return props.value
|
||||||
}
|
}
|
||||||
if (getKey(child)) {
|
if (getKey(child) !== undefined) {
|
||||||
return getKey(child)
|
return getKey(child)
|
||||||
}
|
}
|
||||||
if (getSlotOptions(child).isSelectOptGroup && props.label) {
|
if (getSlotOptions(child).isSelectOptGroup && props.label) {
|
||||||
|
|
Loading…
Reference in New Issue