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

<script>
import Select, { Option } from '../index';
import '../assets/index.less';

export default {
  data() {
    return {
      destroy: false,
      value: 9,
    };
  },
  methods: {
    onChange(e) {
      let value;
      if (e && e.target) {
        value = e.target.value;
      } else {
        value = e;
      }
      console.log('onChange', value, ...arguments);
      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
            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',
                }}
              >
                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} value={i} text={String(i)}>
                  {i}-text
                </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>