ant-design-vue/components/vc-select/demo/single.vue

116 lines
2.6 KiB
Vue
Raw Normal View History

2018-02-22 04:07:37 +00:00
<script>
2019-01-12 03:33:27 +00:00
import Select, { Option } from '../index';
import '../assets/index.less';
2018-02-22 04:07:37 +00:00
export default {
2019-09-28 12:45:07 +00:00
data() {
2018-02-22 04:07:37 +00:00
return {
destroy: false,
2018-02-23 03:28:43 +00:00
value: 9,
2019-01-12 03:33:27 +00:00
};
2018-02-22 04:07:37 +00:00
},
methods: {
2019-09-28 12:45:07 +00:00
onChange(e) {
2019-01-12 03:33:27 +00:00
let value;
2018-02-22 04:07:37 +00:00
if (e && e.target) {
2019-01-12 03:33:27 +00:00
value = e.target.value;
2018-02-22 04:07:37 +00:00
} else {
2019-01-12 03:33:27 +00:00
value = e;
2018-02-22 04:07:37 +00:00
}
2019-01-12 03:33:27 +00:00
console.log('onChange', value, ...arguments);
this.value = value;
2018-02-22 04:07:37 +00:00
},
2019-09-28 12:45:07 +00:00
onDestroy() {
2019-01-12 03:33:27 +00:00
this.destroy = 1;
2018-02-22 04:07:37 +00:00
},
2019-09-28 12:45:07 +00:00
onBlur(v) {
2019-01-12 03:33:27 +00:00
console.log('onBlur', v);
2018-02-22 04:07:37 +00:00
},
2019-09-28 12:45:07 +00:00
onFocus() {
2019-01-12 03:33:27 +00:00
console.log('onFocus');
2018-02-22 04:07:37 +00:00
},
},
2019-09-28 12:45:07 +00:00
render() {
2018-02-22 04:07:37 +00:00
if (this.destroy) {
2019-01-12 03:33:27 +00:00
return null;
2018-02-22 04:07:37 +00:00
}
2019-09-28 12:45:07 +00:00
return (
<div style={{ margin: '20px' }}>
<div style={{ height: '150px' }} />
2018-02-22 04:07:37 +00:00
2019-09-28 12:45:07 +00:00
<h2>Single Select</h2>
2018-02-22 04:07:37 +00:00
2019-09-28 12:45:07 +00:00
<div style={{ width: '300px' }}>
<Select
id="my-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',
}}
>
2018-02-22 04:07:37 +00:00
jack
2019-09-28 12:45:07 +00:00
</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} value={i} text={String(i)}>
{i}-text
</Option>
);
})}
</Select>
</div>
2018-02-22 04:07:37 +00:00
2019-09-28 12:45:07 +00:00
<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>
2018-02-22 04:07:37 +00:00
2019-09-28 12:45:07 +00:00
<p>
<button onClick={this.onDestroy}>destroy</button>
</p>
</div>
);
2018-02-22 04:07:37 +00:00
},
2019-01-12 03:33:27 +00:00
};
2018-02-22 04:07:37 +00:00
</script>