github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: select add dropdownRender removeIcon clearIcon menuItemSelectedIcon

pull/398/head
tangjinzhou 2019-01-05 16:22:25 +08:00
parent b955d50b0c
commit c0947907c0
12 changed files with 300 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
components/select/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2,7 +2,7 @@
exports[`renders ./components/select/demo/automatic-tokenization.md correctly 1`] = `
<div class="ant-select ant-select-enabled" style="width: 100%;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection ant-select-selection--multiple">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
<div class="ant-select-selection__rendered">
<div>
<li class="ant-select-search ant-select-search--inline">
@ -17,17 +17,24 @@ exports[`renders ./components/select/demo/automatic-tokenization.md correctly 1`
exports[`renders ./components/select/demo/basic.md correctly 1`] = `
<div>
<div class="ant-select ant-select-enabled" style="width: 120px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="Lucy" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div>
<div class="ant-select ant-select-disabled" style="width: 120px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="-1" class="ant-select-selection ant-select-selection--single">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="-1" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="Lucy" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div>
<div class="ant-select ant-select-enabled" style="width: 120px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="Lucy" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy</div>
</div><span unselectable="on" class="ant-select-arrow"><i class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></i></span>
</div>
</div>
</div>
@ -36,17 +43,42 @@ exports[`renders ./components/select/demo/basic.md correctly 1`] = `
exports[`renders ./components/select/demo/coordinate.md correctly 1`] = `
<div>
<div class="ant-select ant-select-enabled" style="width: 120px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="Zhejiang" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Zhejiang</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div>
<div class="ant-select ant-select-enabled" style="width: 120px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="Hangzhou" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Hangzhou</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div>
</div>
`;
exports[`renders ./components/select/demo/custom-dropdown-menu.md correctly 1`] = `
<div class="ant-select ant-select-enabled" style="width: 120px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="Lucy" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy</div>
</div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div>
`;
exports[`renders ./components/select/demo/hide-selected.md correctly 1`] = `
<div class="ant-select ant-select-enabled" style="width: 100%;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: block;">Inserted are removed</div>
<div>
<li class="ant-select-search ant-select-search--inline">
<div class="ant-select-search__field__wrap"><input autocomplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
</li>
</div>
</div>
</div>
</div>
@ -54,24 +86,24 @@ exports[`renders ./components/select/demo/coordinate.md correctly 1`] = `
exports[`renders ./components/select/demo/label-in-value.md correctly 1`] = `
<div class="ant-select ant-select-enabled" style="width: 120px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="Lucy (101)" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy (101)</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div>
`;
exports[`renders ./components/select/demo/multiple.md correctly 1`] = `
<div class="ant-select ant-select-enabled" style="width: 100%;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection ant-select-selection--multiple">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: none;">Please select</div>
<div unselectable="on" role="presentation" title="b2" class="ant-select-selection__placeholder" style="display: none;">Please select</div>
<div>
<li unselectable="unselectable" title="a1" class="ant-select-selection__choice">
<li unselectable="on" role="presentation" title="b2" class="ant-select-selection__choice">
<div class="ant-select-selection__choice__content">a1</div><span class="ant-select-selection__choice__remove"><i class="ant-select-remove-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span>
</li>
<li unselectable="unselectable" title="b2" class="ant-select-selection__choice">
<li unselectable="on" role="presentation" title="b2" class="ant-select-selection__choice">
<div class="ant-select-selection__choice__content">b2</div><span class="ant-select-selection__choice__remove"><i class="ant-select-remove-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span>
</li>
<li class="ant-select-search ant-select-search--inline">
@ -85,42 +117,42 @@ exports[`renders ./components/select/demo/multiple.md correctly 1`] = `
exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `
<div class="ant-select ant-select-enabled" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="Lucy" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div><span unselectable="on" role="presentation" title="b2" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div>
`;
exports[`renders ./components/select/demo/options.md correctly 1`] = `
<div class="ant-select ant-select-enabled" style="width: 120px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="北京 010" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">北京</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div><span unselectable="on" role="presentation" title="b2" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div>
`;
exports[`renders ./components/select/demo/search.md correctly 1`] = `
<div class="ant-select ant-select-enabled" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: block;">Select a person</div>
<div unselectable="on" role="presentation" title="b2" class="ant-select-selection__placeholder" style="display: block;">Select a person</div>
<div class="ant-select-search ant-select-search--inline" style="display: none;">
<div class="ant-select-search__field__wrap"><input autocomplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div><span unselectable="on" role="presentation" title="b2" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div>
`;
exports[`renders ./components/select/demo/search-box.md correctly 1`] = `
<div class="ant-select ant-select-enabled ant-select-no-arrow" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: block;">input search text</div>
<div unselectable="on" role="presentation" title="b2" class="ant-select-selection__placeholder" style="display: block;">input search text</div>
<div class="ant-select-search ant-select-search--inline" style="display: none;">
<div class="ant-select-search__field__wrap"><input autocomplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
</div>
@ -131,9 +163,9 @@ exports[`renders ./components/select/demo/search-box.md correctly 1`] = `
exports[`renders ./components/select/demo/select-users.md correctly 1`] = `
<div class="ant-select ant-select-enabled" style="width: 100%;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection ant-select-selection--multiple">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: block;">Select users</div>
<div unselectable="on" role="presentation" title="b2" class="ant-select-selection__placeholder" style="display: block;">Select users</div>
<div>
<li class="ant-select-search ant-select-search--inline">
<div class="ant-select-search__field__wrap"><input autocomplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
@ -148,29 +180,31 @@ exports[`renders ./components/select/demo/size.md correctly 1`] = `
<div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div> <br><br>
<div class="ant-select ant-select-enabled" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="
a1
" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
a1
</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div><span unselectable="on" role="presentation" title="b2" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div> <br>
<div class="ant-select ant-select-enabled" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection ant-select-selection--multiple">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: none;">Please select</div>
<div unselectable="on" role="presentation" title="
b2
" class="ant-select-selection__placeholder" style="display: none;">Please select</div>
<div>
<li unselectable="unselectable" title="
a1
<li unselectable="on" role="presentation" title="
b2
" class="ant-select-selection__choice">
<div class="ant-select-selection__choice__content">
a1
</div><span class="ant-select-selection__choice__remove"><i class="ant-select-remove-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span>
</li>
<li unselectable="unselectable" title="
<li unselectable="on" role="presentation" title="
b2
" class="ant-select-selection__choice">
<div class="ant-select-selection__choice__content">
@ -185,18 +219,20 @@ exports[`renders ./components/select/demo/size.md correctly 1`] = `
</div>
</div> <br>
<div class="ant-select ant-select-enabled" style="width: 200px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection ant-select-selection--multiple">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: none;">Please select</div>
<div unselectable="on" role="presentation" title="
b2
" class="ant-select-selection__placeholder" style="display: none;">Please select</div>
<div>
<li unselectable="unselectable" title="
a1
<li unselectable="on" role="presentation" title="
b2
" class="ant-select-selection__choice">
<div class="ant-select-selection__choice__content">
a1
</div><span class="ant-select-selection__choice__remove"><i class="ant-select-remove-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span>
</li>
<li unselectable="unselectable" title="
<li unselectable="on" role="presentation" title="
b2
" class="ant-select-selection__choice">
<div class="ant-select-selection__choice__content">
@ -216,17 +252,21 @@ exports[`renders ./components/select/demo/size.md correctly 1`] = `
exports[`renders ./components/select/demo/suffix.md correctly 1`] = `
<div>
<div class="ant-select ant-select-enabled" style="width: 120px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="Lucy" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="anticon anticon-smile"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span>
</div><span unselectable="on" role="presentation" title="
b2
" class="ant-select-arrow"><i class="anticon anticon-smile ant-select-arrow-icon"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span>
</div>
</div>
<div class="ant-select ant-select-disabled" style="width: 120px;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="-1" class="ant-select-selection ant-select-selection--single">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="-1" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered">
<div title="Lucy" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy</div>
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="anticon anticon-meh"><svg viewBox="64 64 896 896" data-icon="meh" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 565H360c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h304c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"></path></svg></i></span>
</div><span unselectable="on" role="presentation" title="
b2
" class="ant-select-arrow"><i class="anticon anticon-meh ant-select-arrow-icon"><svg viewBox="64 64 896 896" data-icon="meh" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 565H360c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h304c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"></path></svg></i></span>
</div>
</div>
</div>
@ -234,9 +274,11 @@ exports[`renders ./components/select/demo/suffix.md correctly 1`] = `
exports[`renders ./components/select/demo/tags.md correctly 1`] = `
<div class="ant-select ant-select-enabled" style="width: 100%;">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection ant-select-selection--multiple">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
<div class="ant-select-selection__rendered">
<div unselectable="on" class="ant-select-selection__placeholder" style="display: block;">Tags Mode</div>
<div unselectable="on" role="presentation" title="
b2
" class="ant-select-selection__placeholder" style="display: block;">Tags Mode</div>
<div>
<li class="ant-select-search ant-select-search--inline">
<div class="ant-select-search__field__wrap"><input autocomplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>

9
components/select/__tests__/__snapshots__/index.test.js.snap Normal file
View File

@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Select Select Custom Icons should support customized icons 1`] = `
<div class="ant-select ant-select-enabled">
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single">
<div class="ant-select-selection__rendered"></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
</div>
</div>
`;

20
components/select/__tests__/index.test.js
View File

@ -1,6 +1,7 @@
import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import Select from '..'
import Icon from '../../icon'
import focusTest from '../../../tests/shared/focusTest'
describe('Select', () => {
@ -144,4 +145,23 @@ describe('Select', () => {
expect(triggerComponent.componentInstance.visible).toBe(false)
})
})
describe('Select Custom Icons', () => {
it('should support customized icons', () => {
const wrapper = mount({
render () {
return (
<Select
removeIcon={<Icon type='close' />}
clearIcon={<Icon type='close' />}
menuItemSelectedIcon={<Icon type='close' />}
>
<Option value='1'>1</Option>
</Select>
)
},
})
expect(wrapper.html()).toMatchSnapshot()
})
})
})

3
components/select/demo/basic.md
View File

@ -21,6 +21,9 @@ Basic Usage
<a-select defaultValue="lucy" style='width: 120px' disabled>
<a-select-option value="lucy">Lucy</a-select-option>
</a-select>
<a-select defaultValue="lucy" style='width: 120px' loading>
<a-select-option value="lucy">Lucy</a-select-option>
</a-select>
</div>
</template>
<script>

38
components/select/demo/custom-dropdown-menu.md Normal file
View File

@ -0,0 +1,38 @@
<cn>
#### 扩展菜单
使用 `dropdownRender` 对下拉菜单进行自由扩展。
</cn>
<us>
#### Custom dropdown
Customize the dropdown menu via `dropdownRender`.
</us>
```html
<template>
<a-select defaultValue="lucy" style="width: 120px">
<div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu"/>
<a-divider style="margin: 4px 0;" />
<div style="padding: 8px; cursor: pointer;">
<a-icon type="plus" /> Add item
</div>
</div>
<a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
</a-select>
</template>
<script>
export default {
data: ()=>({console: console}),
components: {
VNodes: {
functional: true,
render: (h, ctx) => ctx.props.vnodes
}
},
}
</script>
```

47
components/select/demo/hide-selected.md Normal file
View File

@ -0,0 +1,47 @@
<cn>
#### 隐藏已选择选项
隐藏下拉列表中已选择的选项。
</cn>
<us>
#### Hide Already Selected
Hide already selected options in the dropdown.
</us>
```html
<template>
<a-select
mode="multiple"
placeholder="Inserted are removed"
:value="selectedItems"
@change="handleChange"
style="width: 100%"
>
<a-select-option v-for="item in filteredOptions" :key="item" :value="item">
{{item}}
</a-select-option>
</a-select>
</template>
<script>
const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
export default {
data() {
return {
selectedItems: [],
}
},
computed: {
filteredOptions() {
return OPTIONS.filter(o => !this.selectedItems.includes(o));
}
},
methods: {
handleChange(selectedItems) {
this.selectedItems = selectedItems
}
}
}
</script>
```

4
components/select/demo/index.vue
View File

@ -11,6 +11,8 @@ import SearchBox from './search-box'
import Search from './search'
import SelectUsers from './select-users'
import Suffix from './suffix'
import HideSelected from './hide-selected'
import CustomDropdownMenu from './custom-dropdown-menu'
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
@ -50,6 +52,8 @@ export default {
<Search/>
<SelectUsers/>
<Suffix/>
<HideSelected />
<CustomDropdownMenu />
<api>
<CN slot='cn' />
<US/>

7
components/select/index.en-US.md
View File

@ -19,6 +19,7 @@
| disabled | Whether disabled select | boolean | false |
| dropdownClassName | className of dropdown menu | string | - |
| dropdownMatchSelectWidth | Whether dropdown's width is same with select. | boolean | true |
| dropdownRender | Customize dropdown content | (menuNode: VNode, props) => VNode | - |
| dropdownStyle | style of dropdown menu | object | - |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |
| firstActiveValue | Value of action option by default | string\|string\[] | - |
@ -34,12 +35,16 @@
| showSearch | Whether show search input in single mode. | boolean | false |
| showArrow | Whether to show the drop-down arrow | boolean | true |
| size | Size of Select input. `default` `large` `small` | string | default |
| suffixIcon | The custom suffix icon | string \| VNode \| slot | - |
| suffixIcon | The custom suffix icon | VNode \| slot | - |
| removeIcon | The custom remove icon | VNode \| slot | - |
| clearIcon | The custom clear icon | VNode \| slot | - |
| menuItemSelectedIcon | The custom menuItemSelected icon | VNode \| slot | - |
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | |
| value(v-model) | Current selected option. | string\|number\|string\[]\|number\[] | - |
| options | Data of the selectOption, manual construction work is no longer needed if this property has been set | array&lt;{value, label, [disabled, key, title]}> | \[] |
| defaultOpen | Initial open state of dropdown | boolean | - |
| open | Controlled open state of dropdown | boolean | - |
| loading | indicate loading state | Boolean | false |
### events
| Events Name | Description | Arguments |

78
components/select/index.jsx
View File

@ -12,6 +12,10 @@ import { cloneElement } from '../_util/vnode'
const AbstractSelectProps = () => ({
prefixCls: PropTypes.string,
size: PropTypes.oneOf(['small', 'large', 'default']),
showAction: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(String),
]),
notFoundContent: PropTypes.any,
transitionName: PropTypes.string,
choiceTransitionName: PropTypes.string,
@ -37,6 +41,8 @@ const AbstractSelectProps = () => ({
open: PropTypes.bool,
defaultOpen: PropTypes.bool,
autoClearSearchValue: PropTypes.bool,
dropdownRender: PropTypes.func,
loading: PropTypes.bool,
})
const Value = PropTypes.shape({
key: PropTypes.string,
@ -71,6 +77,9 @@ const SelectProps = {
getInputElement: PropTypes.func,
options: PropTypes.array,
suffixIcon: PropTypes.any,
removeIcon: PropTypes.any,
clearIcon: PropTypes.any,
menuItemSelectedIcon: PropTypes.any,
}
const SelectPropTypes = {
@ -107,6 +116,9 @@ const Select = {
prop: 'value',
event: 'change',
},
inject: {
configProvider: { default: {}},
},
created () {
warning(
this.$props.mode !== 'combobox',
@ -134,17 +146,39 @@ const Select = {
const { mode } = this
return mode === 'combobox' || mode === SECRET_COMBOBOX_MODE_DO_NOT_USE
},
renderSuffixIcon () {
const { prefixCls, loading } = this.$props
let suffixIcon = getComponentFromProp(this, 'suffixIcon')
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon
if (suffixIcon) {
return isValidElement(suffixIcon)
? cloneElement(suffixIcon, { class: `${prefixCls}-arrow-icon` })
: suffixIcon
}
if (loading) {
return <Icon type='loading' />
}
return <Icon type='down' class={`${prefixCls}-arrow-icon`} />
},
renderSelect (locale) {
const {
prefixCls,
size,
mode,
options,
getPopupContainer,
...restProps
} = getOptionProps(this)
let suffixIcon = getComponentFromProp(this, 'suffixIcon')
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon
const rest = omit(restProps, ['inputIcon', 'removeIcon', 'clearIcon', 'suffixIcon'])
const { getPopupContainer: getContextPopupContainer } = this.configProvider
let removeIcon = getComponentFromProp(this, 'removeIcon')
removeIcon = Array.isArray(removeIcon) ? removeIcon[0] : removeIcon
let clearIcon = getComponentFromProp(this, 'clearIcon')
clearIcon = Array.isArray(clearIcon) ? clearIcon[0] : clearIcon
let menuItemSelectedIcon = getComponentFromProp(this, 'menuItemSelectedIcon')
menuItemSelectedIcon = Array.isArray(menuItemSelectedIcon) ? menuItemSelectedIcon[0] : menuItemSelectedIcon
const rest = omit(restProps, ['inputIcon', 'removeIcon', 'clearIcon', 'suffixIcon', 'menuItemSelectedIcon'])
const cls = {
[`${prefixCls}-lg`]: size === 'large',
@ -162,31 +196,27 @@ const Select = {
tags: mode === 'tags',
combobox: this.isCombobox(),
}
const finalRemoveIcon = (removeIcon &&
(isValidElement(removeIcon)
? cloneElement(removeIcon, { class: `${prefixCls}-remove-icon` })
: removeIcon)) || <Icon type='close' class={`${prefixCls}-remove-icon`} />
const inputIcon = suffixIcon && (
isValidElement(suffixIcon)
? cloneElement(suffixIcon) : suffixIcon) || (
<Icon type='down' class={`${prefixCls}-arrow-icon`} />
)
const finalClearIcon = (clearIcon &&
(isValidElement(clearIcon)
? cloneElement(clearIcon, { class: `${prefixCls}-clear-icon` })
: clearIcon)) || (<Icon type='close-circle' theme='filled' class={`${prefixCls}-clear-icon`} />)
const removeIcon = (
<Icon type='close' class={`${prefixCls}-remove-icon`} />
)
const clearIcon = (
<Icon type='close-circle' theme='filled' class={`${prefixCls}-clear-icon`} />
)
const menuItemSelectedIcon = (
<Icon type='check' class={`${prefixCls}-selected-icon`} />
)
const finalMenuItemSelectedIcon = (menuItemSelectedIcon &&
(isValidElement(menuItemSelectedIcon)
? cloneElement(menuItemSelectedIcon, { class: `${prefixCls}-selected-icon` })
: menuItemSelectedIcon)) || <Icon type='check' class={`${prefixCls}-selected-icon`} />
const selectProps = {
props: {
inputIcon,
removeIcon,
clearIcon,
menuItemSelectedIcon,
inputIcon: this.renderSuffixIcon(),
removeIcon: finalRemoveIcon,
clearIcon: finalClearIcon,
menuItemSelectedIcon: finalMenuItemSelectedIcon,
...rest,
...modeConfig,
prefixCls,
@ -201,6 +231,8 @@ const Select = {
})
: filterEmpty(this.$slots.default),
__propsSymbol__: Symbol(),
dropdownRender: getComponentFromProp(this, 'dropdownRender', {}, false),
getPopupContainer: getPopupContainer || getContextPopupContainer,
},
on: this.$listeners,
class: cls,

6
components/select/index.zh-CN.md
View File

@ -18,6 +18,7 @@
| disabled | 是否禁用 | boolean | false |
| dropdownClassName | 下拉菜单的 className 属性 | string | - |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
| dropdownRender | 自定义下拉框内容 | (menuNode: VNode, props) => VNode | - |
| dropdownStyle | 下拉菜单的 style 属性 | object | - |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |
| firstActiveValue | 默认高亮的选项 | string\|string\[] | - |
@ -33,7 +34,10 @@
| showSearch | 使单选模式可搜索 | boolean | false |
| showArrow | 是否显示下拉小箭头 | boolean | true |
| size | 选择框大小，可选 `large` `small` | string | default |
| suffixIcon | 自定义的选择框后缀图标 | string \| VNode \| slot | - |
| suffixIcon | 自定义的选择框后缀图标 | VNode \| slot | - |
| removeIcon | 自定义的多选框清除图标 | VNode \| slot | - |
| clearIcon | 自定义的多选框清空图标 | VNode \| slot | - |
| menuItemSelectedIcon | 自定义当前选中的条目图标 | VNode \| slot | - |
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | |
| value(v-model) | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - |
| options | options 数据，如果设置则不需要手动构造 selectOption 节点 | array&lt;{value, label, [disabled, key, title]}> | \[] |

4
components/vc-select/Select.jsx
View File

@ -1291,7 +1291,6 @@ const Select = {
maxTagPlaceholderEl = (<li
style={UNSELECTABLE_STYLE}
{...{ attrs: UNSELECTABLE_ATTRIBUTE }}
unselectable='unselectable'
role='presentation'
onMousedown={preventDefaultEvent}
class={`${prefixCls}-selection__choice ${prefixCls}-selection__choice__disabled`}
@ -1321,7 +1320,6 @@ const Select = {
<li
style={UNSELECTABLE_STYLE}
{...{ attrs: UNSELECTABLE_ATTRIBUTE }}
unselectable='unselectable'
onMousedown={preventDefaultEvent}
class={choiceClassName}
role='presentation'
@ -1428,7 +1426,7 @@ const Select = {
class={`${prefixCls}-selection__clear`}
onMousedown={preventDefaultEvent}
style={UNSELECTABLE_STYLE}
unselectable='unselectable'
{...{ attrs: UNSELECTABLE_ATTRIBUTE }}
onClick={this.onClearSelection}
>{clearIcon || <i class={`${prefixCls}-selection__clear-icon`}>×</i>}</span>
)

27
types/select/select.d.ts vendored
View File

@ -5,6 +5,7 @@
import { AntdComponent } from "../component";
import { Option } from "./option";
import { OptionGroup } from "./option-group";
import { VNode } from "vue";
export declare class Select extends AntdComponent {
static Option: Option;
@ -64,6 +65,12 @@ export declare class Select extends AntdComponent {
*/
dropdownMatchSelectWidth: boolean;
/**
* Customize dropdown content
* @type function | slot-scope
*/
dropdownRender?: (menu?: VNode, props?: object) => VNode;
/**
* style of dropdown menu
* @type object
@ -168,10 +175,28 @@ export declare class Select extends AntdComponent {
/**
* The custom suffix icon
* @type any (string | VNode | slot)
* @type any (VNode | slot)
*/
suffixIcon: any;
/**
* The custom remove icon
* @type any (VNode | slot)
*/
removeIcon: any;
/**
* The custom clear icon
* @type any (VNode | slot)
*/
clearIcon: any;
/**
* The custom menuItemSelected icon
* @type any (VNode | slot)
*/
menuItemSelectedIcon: any;
/**
* Separator used to tokenize on tag/multiple mode
* @type string[]