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

doc(transfer): docs & selectedKeys (#4717) 

* refactor(transfer): docs & selectedKeys

* docs: update snapshot
pull/4719/head
ajuner 2021-09-30 08:54:51 +08:00 committed by GitHub
parent 5a9d7188b8
commit cb53a18f02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 451 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

305
components/transfer/__tests__/__snapshots__/demo.test.js.snap
View File

@ -74,8 +74,8 @@ exports[`renders ./components/transfer/demo/advanced.vue correctly 1`] = `
</ul> </ul>
<!----> <!---->
</div> </div>
<div class="ant-transfer-list-footer"><button style="float: right; margin: 5px;" class="ant-btn ant-btn-sm" type="button"> <div class="ant-transfer-list-footer"><button style="float: left; margin: 5px;" class="ant-btn ant-btn-sm" type="button">
<!----><span>reload</span> <!----><span>left reload</span>
</button></div> </button></div>
</div> </div>
<div class="ant-transfer-operation"><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm" type="button"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span><span>to right</span></button><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm" type="button"><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span><span>to left</span></button></div> <div class="ant-transfer-operation"><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm" type="button"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span><span>to right</span></button><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm" type="button"><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span><span>to left</span></button></div>
@ -90,7 +90,7 @@ exports[`renders ./components/transfer/demo/advanced.vue correctly 1`] = `
<div class="ant-transfer-list-body-not-found"><span>没数据</span></div> <div class="ant-transfer-list-body-not-found"><span>没数据</span></div>
</div> </div>
<div class="ant-transfer-list-footer"><button style="float: right; margin: 5px;" class="ant-btn ant-btn-sm" type="button"> <div class="ant-transfer-list-footer"><button style="float: right; margin: 5px;" class="ant-btn ant-btn-sm" type="button">
<!----><span>reload</span> <!----><span>right reload</span>
</button></div> </button></div>
</div> </div>
</div> </div>
@ -300,6 +300,223 @@ exports[`renders ./components/transfer/demo/custom-item.vue correctly 1`] = `
</div> </div>
`; `;
exports[`renders ./components/transfer/demo/oneway.vue correctly 1`] = `
<div>
<div class="ant-transfer">
<div class="ant-transfer-list">
<div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label>
<!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span><span class="ant-transfer-list-header-selected"><span>2/20 items</span><span class="ant-transfer-list-header-title">Source</span></span>
</div>
<div class="ant-transfer-list-body">
<!---->
<ul class="ant-transfer-list-content">
<li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled" title="content1"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content1</span></li>
<li class="ant-transfer-list-content-item" title="content2"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content2</span></li>
<li class="ant-transfer-list-content-item" title="content3"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content3</span></li>
<li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled" title="content4"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content4</span></li>
<li class="ant-transfer-list-content-item" title="content5"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content5</span></li>
<li class="ant-transfer-list-content-item" title="content6"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content6</span></li>
<li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled" title="content7"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content7</span></li>
<li class="ant-transfer-list-content-item" title="content8"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content8</span></li>
<li class="ant-transfer-list-content-item" title="content9"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content9</span></li>
<li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled" title="content10"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content10</span></li>
<li class="ant-transfer-list-content-item" title="content11"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content11</span></li>
<li class="ant-transfer-list-content-item" title="content12"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content12</span></li>
<li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled" title="content13"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content13</span></li>
<li class="ant-transfer-list-content-item" title="content14"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content14</span></li>
<li class="ant-transfer-list-content-item" title="content15"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content15</span></li>
<li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled" title="content16"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content16</span></li>
<li class="ant-transfer-list-content-item" title="content17"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content17</span></li>
<li class="ant-transfer-list-content-item" title="content18"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content18</span></li>
<li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled" title="content19"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content19</span></li>
<li class="ant-transfer-list-content-item" title="content20"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content20</span></li>
</ul>
<!---->
</div>
<!---->
</div>
<div class="ant-transfer-operation"><button class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" type="button"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button>
<!---->
</div>
<div class="ant-transfer-list">
<div class="ant-transfer-list-header">
<!---->
<!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title">Target</span></span>
</div>
<div class="ant-transfer-list-body">
<!---->
<div class="ant-transfer-list-body-not-found">
<div class="ant-empty ant-empty-small ant-empty-normal">
<div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
<ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
<g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
</g>
</g>
</svg></div>
<p class="ant-empty-description">No Data</p>
<!---->
</div>
</div>
</div>
<!---->
</div>
</div><button style="margin-top: 16px;" type="button" role="switch" aria-checked="false" class="ant-switch">
<!----><span class="ant-switch-inner">enabled</span>
</button>
</div>
`;
exports[`renders ./components/transfer/demo/pagination.vue correctly 1`] = `
<div>
<div class="ant-transfer">
<div class="ant-transfer-list ant-transfer-list-with-pagination">
<div class="ant-transfer-list-header">
<!---->
<!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span><span class="ant-transfer-list-header-selected"><span>134 items</span><span class="ant-transfer-list-header-title"></span></span>
</div>
<div class="ant-transfer-list-body">
<!---->
<ul class="ant-transfer-list-content">
<li class="ant-transfer-list-content-item" title="content1"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content1</span></li>
<li class="ant-transfer-list-content-item" title="content2"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content2</span></li>
<li class="ant-transfer-list-content-item" title="content4"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content4</span></li>
<li class="ant-transfer-list-content-item" title="content5"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content5</span></li>
<li class="ant-transfer-list-content-item" title="content7"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content7</span></li>
<li class="ant-transfer-list-content-item" title="content8"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content8</span></li>
<li class="ant-transfer-list-content-item" title="content10"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content10</span></li>
<li class="ant-transfer-list-content-item" title="content11"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content11</span></li>
<li class="ant-transfer-list-content-item" title="content13"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content13</span></li>
<li class="ant-transfer-list-content-item" title="content14"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content14</span></li>
</ul>
<ul class="ant-pagination ant-pagination-simple mini ant-transfer-list-pagination">
<li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></li>
<li title="1/14" class="ant-pagination-simple-pager"><input type="text" size="3"><span class="ant-pagination-slash">／</span>14</li>
<li title="Next Page" tabindex="0" class="ant-pagination-next" aria-disabled="false"><button class="ant-pagination-item-link" type="button" tabindex="-1"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
<!---->
</ul>
</div>
<!---->
</div>
<div class="ant-transfer-operation"><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" type="button"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button><button disabled="" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only" type="button"><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></div>
<div class="ant-transfer-list ant-transfer-list-with-pagination">
<div class="ant-transfer-list-header">
<!---->
<!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span><span class="ant-transfer-list-header-selected"><span>66 items</span><span class="ant-transfer-list-header-title"></span></span>
</div>
<div class="ant-transfer-list-body">
<!---->
<ul class="ant-transfer-list-content">
<li class="ant-transfer-list-content-item" title="content3"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content3</span></li>
<li class="ant-transfer-list-content-item" title="content6"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content6</span></li>
<li class="ant-transfer-list-content-item" title="content9"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content9</span></li>
<li class="ant-transfer-list-content-item" title="content12"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content12</span></li>
<li class="ant-transfer-list-content-item" title="content15"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content15</span></li>
<li class="ant-transfer-list-content-item" title="content18"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content18</span></li>
<li class="ant-transfer-list-content-item" title="content21"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content21</span></li>
<li class="ant-transfer-list-content-item" title="content24"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content24</span></li>
<li class="ant-transfer-list-content-item" title="content27"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content27</span></li>
<li class="ant-transfer-list-content-item" title="content30"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label><span class="ant-transfer-list-content-item-text">content30</span></li>
</ul>
<ul class="ant-pagination ant-pagination-simple mini ant-transfer-list-pagination">
<li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></li>
<li title="1/7" class="ant-pagination-simple-pager"><input type="text" size="3"><span class="ant-pagination-slash">／</span>7</li>
<li title="Next Page" tabindex="0" class="ant-pagination-next" aria-disabled="false"><button class="ant-pagination-item-link" type="button" tabindex="-1"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
<!---->
</ul>
</div>
<!---->
</div>
</div><button style="margin-top: 16px;" type="button" role="switch" aria-checked="false" class="ant-switch">
<!----><span class="ant-switch-inner">enabled</span>
</button>
</div>
`;
exports[`renders ./components/transfer/demo/search.vue correctly 1`] = ` exports[`renders ./components/transfer/demo/search.vue correctly 1`] = `
<div class="ant-transfer"> <div class="ant-transfer">
<div class="ant-transfer-list"> <div class="ant-transfer-list">
@ -412,7 +629,7 @@ exports[`renders ./components/transfer/demo/table-transfer.vue correctly 1`] = `
<div class="ant-transfer-list"> <div class="ant-transfer-list">
<div class="ant-transfer-list-header"> <div class="ant-transfer-list-header">
<!----> <!---->
<!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span><span class="ant-transfer-list-header-selected"><span>14 items</span><span class="ant-transfer-list-header-title"></span></span> <!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span><span class="ant-transfer-list-header-selected"><span>7 items</span><span class="ant-transfer-list-header-title"></span></span>
</div> </div>
<div class="ant-transfer-list-body"> <div class="ant-transfer-list-body">
<!----> <!---->
@ -547,48 +764,6 @@ exports[`renders ./components/transfer/demo/table-transfer.vue correctly 1`] = `
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="10" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label>
</td>
<td class="ant-table-cell">
<!---->content11
</td>
<td class="ant-table-cell">
<!---->description of content11
</td>
</tr>
<!---->
<tr data-row-key="12" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label>
</td>
<td class="ant-table-cell">
<!---->content13
</td>
<td class="ant-table-cell">
<!---->description of content13
</td>
</tr>
<!---->
<tr data-row-key="13" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label>
</td>
<td class="ant-table-cell">
<!---->content14
</td>
<td class="ant-table-cell">
<!---->description of content14
</td>
</tr>
<!---->
</tbody> </tbody>
<!----> <!---->
</table> </table>
@ -600,8 +775,7 @@ exports[`renders ./components/transfer/demo/table-transfer.vue correctly 1`] = `
<!----> <!---->
<li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></li> <li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></button></li>
<li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"><a rel="nofollow">1</a></li> <li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"><a rel="nofollow">1</a></li>
<li title="2" tabindex="0" class="ant-pagination-item ant-pagination-item-2"><a rel="nofollow">2</a></li> <li title="Next Page" class="ant-pagination-next ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
<li title="Next Page" tabindex="0" class="ant-pagination-next" aria-disabled="false"><button class="ant-pagination-item-link" type="button" tabindex="-1"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
<!----> <!---->
</ul> </ul>
</div> </div>
@ -615,7 +789,7 @@ exports[`renders ./components/transfer/demo/table-transfer.vue correctly 1`] = `
<div class="ant-transfer-list"> <div class="ant-transfer-list">
<div class="ant-transfer-list-header"> <div class="ant-transfer-list-header">
<!----> <!---->
<!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span><span class="ant-transfer-list-header-selected"><span>6 items</span><span class="ant-transfer-list-header-title"></span></span> <!----><span tabindex="-1" role="img" aria-label="down" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><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></span><span class="ant-transfer-list-header-selected"><span>3 items</span><span class="ant-transfer-list-header-title"></span></span>
</div> </div>
<div class="ant-transfer-list-body"> <div class="ant-transfer-list-body">
<!----> <!---->
@ -682,39 +856,6 @@ exports[`renders ./components/transfer/demo/table-transfer.vue correctly 1`] = `
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="11" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label>
</td>
<td class="ant-table-cell">
<!---->content12
</td>
</tr>
<!---->
<tr data-row-key="14" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label>
</td>
<td class="ant-table-cell">
<!---->content15
</td>
</tr>
<!---->
<tr data-row-key="17" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label>
</td>
<td class="ant-table-cell">
<!---->content18
</td>
</tr>
<!---->
</tbody> </tbody>
<!----> <!---->
</table> </table>

24
components/transfer/demo/advanced.vue
View File

@ -1,6 +1,6 @@
<docs> <docs>
--- ---
order: 2 order: 3
title: title:
zh-CN: 高级用法 zh-CN: 高级用法
en-US: Advanced en-US: Advanced
@ -18,6 +18,7 @@ You can customize the labels of the transfer buttons, the width and height of th
<template> <template>
<a-transfer <a-transfer
v-model:target-keys="targetKeys"
:data-source="mockData" :data-source="mockData"
show-search show-search
:list-style="{ :list-style="{
@ -25,12 +26,26 @@ You can customize the labels of the transfer buttons, the width and height of th
height: '300px', height: '300px',
}" }"
:operations="['to right', 'to left']" :operations="['to right', 'to left']"
:target-keys="targetKeys"
:render="item => `${item.title}-${item.description}`" :render="item => `${item.title}-${item.description}`"
@change="handleChange" @change="handleChange"
> >
<template #footer> <template #footer="{ direction }">
<a-button size="small" style="float: right; margin: 5px" @click="getMock">reload</a-button> <a-button
v-if="direction === 'left'"
size="small"
style="float: left; margin: 5px"
@click="getMock"
>
left reload
</a-button>
<a-button
v-else-if="direction === 'right'"
size="small"
style="float: right; margin: 5px"
@click="getMock"
>
right reload
</a-button>
</template> </template>
<template #notFoundContent> <template #notFoundContent>
<span>没数据</span> <span>没数据</span>
@ -72,7 +87,6 @@ export default defineComponent({
targetKeys.value = keys; targetKeys.value = keys;
}; };
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => { const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
targetKeys.value = keys;
console.log(keys, direction, moveKeys); console.log(keys, direction, moveKeys);
}; };
return { return {

6
components/transfer/demo/basic.vue
View File

@ -19,10 +19,10 @@ The most basic usage of `Transfer` involves providing the source data and target
<template> <template>
<div> <div>
<a-transfer <a-transfer
v-model:target-keys="targetKeys"
v-model:selected-keys="selectedKeys"
:data-source="mockData" :data-source="mockData"
:titles="['Source', 'Target']" :titles="['Source', 'Target']"
:target-keys="targetKeys"
:selected-keys="selectedKeys"
:render="item => item.title" :render="item => item.title"
:disabled="disabled" :disabled="disabled"
@change="handleChange" @change="handleChange"
@ -65,13 +65,11 @@ export default defineComponent({
const selectedKeys = ref<string[]>(['1', '4']); const selectedKeys = ref<string[]>(['1', '4']);
const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => { const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
targetKeys.value = nextTargetKeys;
console.log('targetKeys: ', nextTargetKeys); console.log('targetKeys: ', nextTargetKeys);
console.log('direction: ', direction); console.log('direction: ', direction);
console.log('moveKeys: ', moveKeys); console.log('moveKeys: ', moveKeys);
}; };
const handleSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => { const handleSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
selectedKeys.value = [...sourceSelectedKeys, ...targetSelectedKeys];
console.log('sourceSelectedKeys: ', sourceSelectedKeys); console.log('sourceSelectedKeys: ', sourceSelectedKeys);
console.log('targetSelectedKeys: ', targetSelectedKeys); console.log('targetSelectedKeys: ', targetSelectedKeys);
}; };

5
components/transfer/demo/custom-item.vue
View File

@ -1,6 +1,6 @@
<docs> <docs>
--- ---
order: 3 order: 4
title: title:
zh-CN: 自定义渲染行数据 zh-CN: 自定义渲染行数据
en-US: Custom datasource en-US: Custom datasource
@ -18,12 +18,12 @@ Custom each Transfer Item, and in this way you can render a complex datasource.
<template> <template>
<a-transfer <a-transfer
v-model:target-keys="targetKeys"
:data-source="mockData" :data-source="mockData"
:list-style="{ :list-style="{
width: '300px', width: '300px',
height: '300px', height: '300px',
}" }"
:target-keys="targetKeys"
@change="handleChange" @change="handleChange"
> >
<template #render="item"> <template #render="item">
@ -66,7 +66,6 @@ export default defineComponent({
targetKeys.value = keys; targetKeys.value = keys;
}; };
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => { const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
targetKeys.value = keys;
console.log(keys, direction, moveKeys); console.log(keys, direction, moveKeys);
}; };
return { return {

6
components/transfer/demo/index.vue
View File

@ -1,20 +1,24 @@
<template> <template>
<demo-sort :cols="1"> <demo-sort :cols="1">
<basic /> <basic />
<oneway />
<search /> <search />
<advanced /> <advanced />
<custom-item /> <custom-item />
<pagination />
<table-transfer /> <table-transfer />
<tree-transfer /> <tree-transfer />
</demo-sort> </demo-sort>
</template> </template>
<script lang="ts"> <script lang="ts">
import Basic from './basic.vue'; import Basic from './basic.vue';
import Oneway from './oneway.vue';
import Search from './search.vue'; import Search from './search.vue';
import Advanced from './advanced.vue'; import Advanced from './advanced.vue';
import CustomItem from './custom-item.vue'; import CustomItem from './custom-item.vue';
import TableTransfer from './table-transfer.vue'; import TableTransfer from './table-transfer.vue';
import TreeTransfer from './tree-transfer.vue'; import TreeTransfer from './tree-transfer.vue';
import Pagination from './pagination.vue';
import CN from '../index.zh-CN.md'; import CN from '../index.zh-CN.md';
import US from '../index.en-US.md'; import US from '../index.en-US.md';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
@ -24,9 +28,11 @@ export default defineComponent({
US, US,
components: { components: {
Basic, Basic,
Oneway,
Search, Search,
Advanced, Advanced,
CustomItem, CustomItem,
Pagination,
TableTransfer, TableTransfer,
TreeTransfer, TreeTransfer,
}, },

92
components/transfer/demo/oneway.vue Normal file
View File

@ -0,0 +1,92 @@
<docs>
---
order: 1
title:
zh-CN: 单向样式
en-US: One Way
---
## zh-CN
通过 `oneWay` 将 Transfer 转为单向样式。
## en-US
Use `oneWay` to makes Transfer to one way style.
</docs>
<template>
<div>
<a-transfer
v-model:target-keys="targetKeys"
v-model:selected-keys="selectedKeys"
:data-source="mockData"
:one-way="true"
:titles="['Source', 'Target']"
:render="item => item.title"
:disabled="disabled"
@change="handleChange"
@selectChange="handleSelectChange"
@scroll="handleScroll"
/>
<a-switch
v-model:checked="disabled"
un-checked-children="enabled"
checked-children="disabled"
style="margin-top: 16px"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
interface MockData {
key: string;
title: string;
description: string;
disabled: boolean;
}
const mockData: MockData[] = [];
for (let i = 0; i < 20; i++) {
mockData.push({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,
disabled: i % 3 < 1,
});
}
export default defineComponent({
data() {
const disabled = ref<boolean>(false);
const targetKeys = ref<string[]>([]);
const selectedKeys = ref<string[]>(['1', '4']);
const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
console.log('targetKeys: ', nextTargetKeys);
console.log('direction: ', direction);
console.log('moveKeys: ', moveKeys);
};
const handleSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
console.log('sourceSelectedKeys: ', sourceSelectedKeys);
console.log('targetSelectedKeys: ', targetSelectedKeys);
};
const handleScroll = (direction: string, e: Event) => {
console.log('direction:', direction);
console.log('target:', e.target);
};
return {
mockData,
targetKeys,
selectedKeys,
disabled,
handleChange,
handleSelectChange,
handleScroll,
};
},
});
</script>

74
components/transfer/demo/pagination.vue Normal file
View File

@ -0,0 +1,74 @@
<docs>
---
order: 5
title:
zh-CN: 分页
en-US: Pagination
---
## zh-CN
大数据下使用分页。
## en-US
large count of items with pagination.
</docs>
<template>
<div>
<a-transfer
v-model:target-keys="targetKeys"
:data-source="mockData"
:render="item => item.title"
:disabled="disabled"
pagination
@change="handleChange"
/>
<a-switch
v-model:checked="disabled"
un-checked-children="enabled"
checked-children="disabled"
style="margin-top: 16px"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
interface MockData {
key: string;
title: string;
description: string;
}
const mockData: MockData[] = [];
for (let i = 0; i < 200; i++) {
mockData.push({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,
});
}
const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);
export default defineComponent({
data() {
const disabled = ref<boolean>(false);
const targetKeys = ref<string[]>(oriTargetKeys);
const handleChange = (nextTargetKeys: string[], direction: string, moveKeys: string[]) => {
console.log('targetKeys: ', nextTargetKeys);
console.log('direction: ', direction);
console.log('moveKeys: ', moveKeys);
};
return {
mockData,
targetKeys,
disabled,
handleChange,
};
},
});
</script>

5
components/transfer/demo/search.vue
View File

@ -1,6 +1,6 @@
<docs> <docs>
--- ---
order: 1 order: 2
title: title:
zh-CN: 带搜索框 zh-CN: 带搜索框
en-US: Search en-US: Search
@ -18,10 +18,10 @@ Transfer with a search box.
<template> <template>
<a-transfer <a-transfer
v-model:target-keys="targetKeys"
:data-source="mockData" :data-source="mockData"
show-search show-search
:filter-option="filterOption" :filter-option="filterOption"
:target-keys="targetKeys"
:render="item => item.title" :render="item => item.title"
@change="handleChange" @change="handleChange"
@search="handleSearch" @search="handleSearch"
@ -66,7 +66,6 @@ export default defineComponent({
}; };
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => { const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
console.log(keys, direction, moveKeys); console.log(keys, direction, moveKeys);
targetKeys.value = keys;
}; };
const handleSearch = (dir: string, value: string) => { const handleSearch = (dir: string, value: string) => {

14
components/transfer/demo/table-transfer.vue
View File

@ -1,6 +1,6 @@
<docs> <docs>
--- ---
order: 4 order: 6
title: title:
zh-CN: 表格穿梭框 zh-CN: 表格穿梭框
en-US: Table Transfer en-US: Table Transfer
@ -19,8 +19,8 @@ Customize render list with Table component.
<template> <template>
<div> <div>
<a-transfer <a-transfer
v-model:target-keys="targetKeys"
:data-source="mockData" :data-source="mockData"
:target-keys="targetKeys"
:disabled="disabled" :disabled="disabled"
:show-search="showSearch" :show-search="showSearch"
:filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1" :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
@ -76,7 +76,6 @@ Customize render list with Table component.
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { difference } from 'lodash-es';
import { defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';
interface MockData { interface MockData {
key: string; key: string;
@ -86,7 +85,7 @@ interface MockData {
} }
type tableColumn = Record<string, string>; type tableColumn = Record<string, string>;
const mockData: MockData[] = []; const mockData: MockData[] = [];
for (let i = 0; i < 20; i++) { for (let i = 0; i < 10; i++) {
mockData.push({ mockData.push({
key: i.toString(), key: i.toString(),
title: `content${i + 1}`, title: `content${i + 1}`,
@ -123,7 +122,7 @@ export default defineComponent({
const rightColumns = ref<tableColumn[]>(rightTableColumns); const rightColumns = ref<tableColumn[]>(rightTableColumns);
const onChange = (nextTargetKeys: string[]) => { const onChange = (nextTargetKeys: string[]) => {
targetKeys.value = nextTargetKeys; console.log('nextTargetKeys', nextTargetKeys);
}; };
const getRowSelection = ({ const getRowSelection = ({
@ -140,10 +139,7 @@ export default defineComponent({
const treeSelectedKeys = selectedRows const treeSelectedKeys = selectedRows
.filter(item => !item.disabled) .filter(item => !item.disabled)
.map(({ key }) => key); .map(({ key }) => key);
const diffKeys = selected onItemSelectAll(treeSelectedKeys, selected);
? difference(treeSelectedKeys, selectedKeys)
: difference(selectedKeys, treeSelectedKeys);
onItemSelectAll(diffKeys, selected);
}, },
onSelect({ key }: Record<string, string>, selected: boolean) { onSelect({ key }: Record<string, string>, selected: boolean) {
onItemSelect(key, selected); onItemSelect(key, selected);

9
components/transfer/demo/tree-transfer.vue
View File

@ -1,6 +1,6 @@
<docs> <docs>
--- ---
order: 5 order: 7
title: title:
zh-CN: 树穿梭框 zh-CN: 树穿梭框
en-US: Tree Transfer en-US: Tree Transfer
@ -19,12 +19,11 @@ Customize render list with Tree component.
<template> <template>
<div> <div>
<a-transfer <a-transfer
v-model:target-keys="targetKeys"
class="tree-transfer" class="tree-transfer"
:data-source="dataSource" :data-source="dataSource"
:target-keys="targetKeys"
:render="item => item.title" :render="item => item.title"
:show-select-all="false" :show-select-all="false"
@change="onChange"
> >
<template #children="{ direction, selectedKeys, onItemSelect }"> <template #children="{ direction, selectedKeys, onItemSelect }">
<a-tree <a-tree
@ -103,9 +102,6 @@ export default defineComponent({
return handleTreeData(tData, targetKeys.value); return handleTreeData(tData, targetKeys.value);
}); });
const onChange = (keys: string[]) => {
targetKeys.value = keys;
};
const onChecked = ( const onChecked = (
_: Record<string, string[]>, _: Record<string, string[]>,
e: AntTreeNodeCheckedEvent, e: AntTreeNodeCheckedEvent,
@ -119,7 +115,6 @@ export default defineComponent({
targetKeys, targetKeys,
dataSource, dataSource,
treeData, treeData,
onChange,
onChecked, onChecked,
}; };
}, },

11
components/transfer/index.en-US.md
View File

@ -12,6 +12,10 @@ Alert component for feedback.
- When you need to show alert messages to users. - When you need to show alert messages to users.
- When you need a persistent static container which is closable by user actions. - When you need a persistent static container which is closable by user actions.
Transfer the elements between two columns in an intuitive and efficient way.
One or more elements can be selected from either column, one click on the proper `direction` button, and the transfer is done. The left column is considered the `source` and the right column is considered the `target`. As you can see in the API description, these names are reflected in.
## API ## API
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
@ -22,12 +26,15 @@ Alert component for feedback.
| footer | customize the progress dot by setting a scoped slot | slot="footer" slot-scope="props" | | | | footer | customize the progress dot by setting a scoped slot | slot="footer" slot-scope="props" | | |
| listStyle | A custom CSS style used for rendering the transfer columns. | object | | | | listStyle | A custom CSS style used for rendering the transfer columns. | object | | |
| locale | i18n text including filter, empty text, item unit, etc | object | `{ itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'The list is empty', searchPlaceholder: 'Search here' }` | | | locale | i18n text including filter, empty text, item unit, etc | object | `{ itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'The list is empty', searchPlaceholder: 'Search here' }` | |
| oneWay | Display as single direction style | boolean | false | 3.0.0 |
| operations | A set of operations that are sorted from top to bottom. | string\[] | \['>', '<'] | | | operations | A set of operations that are sorted from top to bottom. | string\[] | \['>', '<'] | |
| operationStyle | A custom CSS style used for rendering the operations column | CSSProperties | - | 3.0.0 |
| pagination | Use pagination. Not work in render props | boolean \| { pageSize: number } | false | 3.0.0 |
| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a element and `value` is for title | Function(record) \| slot | | | | render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a element and `value` is for title | Function(record) \| slot | | |
| selectedKeys | A set of keys of selected items. | string\[] | \[] | | | selectedKeys(v-model) | A set of keys of selected items. | string\[] | \[] | |
| showSearch | If included, a search box is shown on each column. | boolean | false | | | showSearch | If included, a search box is shown on each column. | boolean | false | |
| showSelectAll | Show select all checkbox on the header | boolean | true | | | showSelectAll | Show select all checkbox on the header | boolean | true | |
| targetKeys | A set of keys of elements that are listed on the right column. | string\[] | \[] | | | targetKeys(v-model) | A set of keys of elements that are listed on the right column. | string\[] | \[] | |
| titles | A set of titles that are sorted from left to right. | string\[] | - | | | titles | A set of titles that are sorted from left to right. | string\[] | - | |
### events ### events

17
components/transfer/index.tsx
View File

@ -1,5 +1,5 @@
import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'; import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
import { watchEffect, defineComponent, ref, watch } from 'vue'; import { watchEffect, defineComponent, ref, watch, toRaw } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { getPropsSlot } from '../_util/props-util'; import { getPropsSlot } from '../_util/props-util';
import classNames from '../_util/classNames'; import classNames from '../_util/classNames';
@ -90,11 +90,6 @@ export const transferProps = {
children: { type: Function as PropType<(props: TransferListBodyProps) => VueNode> }, children: { type: Function as PropType<(props: TransferListBodyProps) => VueNode> },
oneWay: { type: Boolean, default: undefined }, oneWay: { type: Boolean, default: undefined },
pagination: { type: [Object, Boolean] as PropType<PaginationType>, default: undefined }, pagination: { type: [Object, Boolean] as PropType<PaginationType>, default: undefined },
onChange: PropTypes.func,
onSelectChange: PropTypes.func,
onSearch: PropTypes.func,
onScroll: PropTypes.func,
['onUpdate:targetKeys']: PropTypes.func,
}; };
export type TransferProps = Partial<ExtractPropTypes<typeof transferProps>>; export type TransferProps = Partial<ExtractPropTypes<typeof transferProps>>;
@ -113,7 +108,7 @@ const Transfer = defineComponent({
'rightSelectAllLabel', 'rightSelectAllLabel',
'footer', 'footer',
], ],
emits: ['update:targetKeys', 'change', 'search', 'scroll', 'selectChange'], emits: ['update:targetKeys', 'update:selectedKeys', 'change', 'search', 'scroll', 'selectChange'],
setup(props, { emit, attrs, slots, expose }) { setup(props, { emit, attrs, slots, expose }) {
const { configProvider, prefixCls, direction } = useConfigInject('transfer', props); const { configProvider, prefixCls, direction } = useConfigInject('transfer', props);
const sourceSelectedKeys = ref([]); const sourceSelectedKeys = ref([]);
@ -193,14 +188,14 @@ const Transfer = defineComponent({
if (!props.selectedKeys) { if (!props.selectedKeys) {
sourceSelectedKeys.value = holder; sourceSelectedKeys.value = holder;
} }
emit('update:selectedKeys', [...holder, ...targetSelectedKeys.value]);
emit('selectChange', holder, targetSelectedKeys.value); emit('selectChange', holder, toRaw(targetSelectedKeys.value));
} else { } else {
if (!props.selectedKeys) { if (!props.selectedKeys) {
targetSelectedKeys.value = holder; targetSelectedKeys.value = holder;
} }
emit('update:selectedKeys', [...holder, ...sourceSelectedKeys.value]);
emit('selectChange', sourceSelectedKeys.value, holder); emit('selectChange', toRaw(sourceSelectedKeys.value), holder);
} }
}; };

11
components/transfer/index.zh-CN.md
View File

@ -13,6 +13,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
- 需要在多个可选项中进行多选时。 - 需要在多个可选项中进行多选时。
- 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。 - 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。
穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。
选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。其中，左边一栏为 `source`，右边一栏为 `target`，API 的设计也反映了这两个概念。
## API ## API
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
@ -23,12 +27,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
| footer | 可以设置为一个 作用域插槽 | slot="footer" slot-scope="props" | | | | footer | 可以设置为一个 作用域插槽 | slot="footer" slot-scope="props" | | |
| listStyle | 两个穿梭框的自定义样式 | object | | | | listStyle | 两个穿梭框的自定义样式 | object | | |
| locale | 各种语言 | object | `{ itemUnit: '项', itemsUnit: '项', notFoundContent: '列表为空', searchPlaceholder: '请输入搜索内容' }` | | | locale | 各种语言 | object | `{ itemUnit: '项', itemsUnit: '项', notFoundContent: '列表为空', searchPlaceholder: '请输入搜索内容' }` | |
| oneWay | 展示为单向样式 | boolean | false | 3.0.0 |
| operations | 操作文案集合，顺序从上至下 | string\[] | \['>', '<'] | | | operations | 操作文案集合，顺序从上至下 | string\[] | \['>', '<'] | |
| operationStyle | 操作栏的自定义样式 | CSSProperties | - | 3.0.0 |
| pagination | 使用分页样式，自定义渲染列表下无效 | boolean \| { pageSize: number } | flase | 3.0.0 |
| render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 element。或者返回一个普通对象，其中 `label` 字段为 element，`value` 字段为 title | Function(record)\| slot | | | | render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 element。或者返回一个普通对象，其中 `label` 字段为 element，`value` 字段为 title | Function(record)\| slot | | |
| selectedKeys | 设置哪些项应该被选中 | string\[] | \[] | | | selectedKeys(v-model) | 设置哪些项应该被选中 | string\[] | \[] | |
| showSearch | 是否显示搜索框 | boolean | false | | | showSearch | 是否显示搜索框 | boolean | false | |
| showSelectAll | 是否展示全选勾选框 | boolean | true | | | showSelectAll | 是否展示全选勾选框 | boolean | true | |
| targetKeys | 显示在右侧框数据的 key 集合 | string\[] | \[] | | | targetKeys(v-model) | 显示在右侧框数据的 key 集合 | string\[] | \[] | |
| titles | 标题集合，顺序从左至右 | string\[] | \['', ''] | | | titles | 标题集合，顺序从左至右 | string\[] | \['', ''] | |
### 事件 ### 事件