75 lines
1.7 KiB
Vue
75 lines
1.7 KiB
Vue
<script>
|
||
import Select, { Option } from '../index'
|
||
import '../assets/index.less'
|
||
|
||
export default {
|
||
data () {
|
||
return {
|
||
useAnim: 0,
|
||
value: ['a10'],
|
||
}
|
||
},
|
||
methods: {
|
||
onChange (value, options) {
|
||
console.log('onChange', value, options)
|
||
this.value = value
|
||
},
|
||
onSelect (...args) {
|
||
console.log('select ', args)
|
||
},
|
||
onDeselect (...args) {
|
||
console.log('deselect ', args)
|
||
},
|
||
useAnimation (e) {
|
||
this.useAnim = e.target.checked
|
||
},
|
||
},
|
||
|
||
render () {
|
||
const children = []
|
||
for (let i = 10; i < 36; i++) {
|
||
children.push(
|
||
<Option key={i.toString(36) + i} disabled={i === 10} title={`中文${i}`}>
|
||
中文{i}
|
||
</Option>
|
||
)
|
||
}
|
||
const dropdownMenuStyle = {
|
||
maxHeight: '200px',
|
||
}
|
||
return (<div>
|
||
<h2>multiple select（scroll the menu）</h2>
|
||
|
||
<p>
|
||
<label>
|
||
anim
|
||
<input checked={this.useAnim} type='checkbox' onChange={this.useAnimation} />
|
||
</label>
|
||
</p>
|
||
|
||
<div style={{ width: '300px' }}>
|
||
<Select
|
||
value={this.value}
|
||
animation={this.useAnim ? 'slide-up' : null}
|
||
choiceTransitionName='rc-select-selection__choice-zoom'
|
||
dropdownMenuStyle={dropdownMenuStyle}
|
||
style={{ width: '500px' }}
|
||
multiple
|
||
allowClear
|
||
optionFilterProp='children'
|
||
optionLabelProp='children'
|
||
onSelect={this.onSelect}
|
||
onDeselect={this.onDeselect}
|
||
placeholder='please select'
|
||
onChange={this.onChange}
|
||
onFocus={() => console.log('focus')}
|
||
tokenSeparators={[' ', ',']}
|
||
>
|
||
{children}
|
||
</Select>
|
||
</div>
|
||
</div>)
|
||
},
|
||
}
|
||
</script>
|