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

feat: update button

pull/1790/head
tangjinzhou 2020-02-09 11:09:30 +08:00
parent 0ddb385785
commit 7b2fdd9051
11 changed files with 115 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/config.js
View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
dev: { dev: {
componentName: 'badge', // dev components componentName: 'button', // dev components
}, },
}; };

16
components/button/__tests__/__snapshots__/demo.test.js.snap
View File

@ -36,7 +36,7 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `<div style="
exports[`renders ./components/button/demo/icon.md correctly 1`] = ` exports[`renders ./components/button/demo/icon.md correctly 1`] = `
<div><button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""> <div><button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path> <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
</svg></i></button> <button type="button" class="ant-btn ant-btn-primary"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""> </svg></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-circle"><span>A</span></button> <button type="button" class="ant-btn ant-btn-primary"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path> <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
</svg></i><span>Search</span></button> <button type="button" class="ant-btn ant-btn-circle ant-btn-icon-only"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""> </svg></i><span>Search</span></button> <button type="button" class="ant-btn ant-btn-circle ant-btn-icon-only"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path> <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
@ -62,10 +62,10 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
<path d="M705.6 124.9a8 8 0 0 0-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0 1 62.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0 1 27.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 0 1-76.3 113.3 353.06 353.06 0 0 1-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 0 1-113.2-76.4A355.92 355.92 0 0 1 184 650.4a355 355 0 0 1-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"></path> <path d="M705.6 124.9a8 8 0 0 0-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0 1 62.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0 1 27.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 0 1-76.3 113.3 353.06 353.06 0 0 1-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 0 1-113.2-76.4A355.92 355.92 0 0 1 184 650.4a355 355 0 0 1-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"></path>
</svg></i><span>延迟1s</span></button> <br> <button type="button" class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-loading"><i aria-label="icon: loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="anticon-spin"> </svg></i><span>延迟1s</span></button> <br> <button type="button" class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-loading"><i aria-label="icon: loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" 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> <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></button> <button type="button" class="ant-btn ant-btn-circle ant-btn-icon-only ant-btn-loading"><i aria-label="icon: loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" 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></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only ant-btn-loading"><i aria-label="icon: loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="anticon-spin"> </svg></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only ant-btn-loading"><i aria-label="icon: loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" 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> <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></button> <button type="button" class="ant-btn ant-btn-danger ant-btn-round ant-btn-icon-only ant-btn-loading"><i aria-label="icon: loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" 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></button></div> </svg></i></button></div>
`; `;
@ -77,11 +77,15 @@ exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
exports[`renders ./components/button/demo/size.md correctly 1`] = ` exports[`renders ./components/button/demo/size.md correctly 1`] = `
<div> <div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><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="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><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> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-lg"><span>Normal</span></button> <button type="button" class="ant-btn ant-btn-dashed ant-btn-lg"><span>Dashed</span></button> <button type="button" class="ant-btn ant-btn-danger ant-btn-lg"><span>Danger</span></button> <button type="button" class="ant-btn ant-btn-link ant-btn-lg"><span>Link</span></button> <br> <button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""> <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><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="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><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> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-lg"><span>Normal</span></button> <button type="button" class="ant-btn ant-btn-dashed ant-btn-lg"><span>Dashed</span></button> <button type="button" class="ant-btn ant-btn-danger ant-btn-lg"><span>Danger</span></button> <button type="button" class="ant-btn ant-btn-link ant-btn-lg"><span>Link</span></button> <br> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg ant-btn-icon-only"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path> <path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
</svg></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""> </svg></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path> <path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
</svg></i><span>Download</span></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""> </svg></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg ant-btn-icon-only"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
</svg></i></button>Download <button type="button" class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg ant-btn-icon-only"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
</svg></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
<path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path> <path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
</svg></i><span>Download</span></button> <br> </svg></i><span>Download</span></button> <br>
<div class="ant-btn-group ant-btn-group-lg"><button type="button" class="ant-btn ant-btn-primary"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""> <div class="ant-btn-group ant-btn-group-lg"><button type="button" class="ant-btn ant-btn-primary"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">

41
components/button/__tests__/index.test.js
View File

@ -3,8 +3,12 @@ import Icon from '../../icon';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import Vue from 'vue'; import Vue from 'vue';
import { asyncExpect } from '@/tests/utils'; import { asyncExpect } from '@/tests/utils';
import { sleep } from '../../../tests/utils';
import mountTest from '../../../tests/shared/mountTest';
describe('Button', () => { describe('Button', () => {
mountTest(Button);
mountTest(Button.Group);
it('renders correctly', () => { it('renders correctly', () => {
const wrapper = mount({ const wrapper = mount({
render() { render() {
@ -148,7 +152,20 @@ describe('Button', () => {
expect(wrapper.contains('.ant-btn-loading')).toBe(false); expect(wrapper.contains('.ant-btn-loading')).toBe(false);
}); });
}); });
it('should not clickable when button is loading', () => {
const onClick = jest.fn();
const wrapper = mount({
render() {
return (
<Button loading onClick={onClick}>
button
</Button>
);
},
});
wrapper.trigger('click');
expect(onClick).not.toHaveBeenCalledWith();
});
it('should support link button', () => { it('should support link button', () => {
const wrapper = mount({ const wrapper = mount({
render() { render() {
@ -197,4 +214,26 @@ describe('Button', () => {
}); });
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
}); });
it('should support to change loading', async () => {
const wrapper = mount(Button, {
slots: {
default: ['button'],
},
});
wrapper.setProps({ loading: true });
expect(wrapper.findAll('.ant-btn-loading').length).toBe(1);
wrapper.setProps({ loading: false });
expect(wrapper.findAll('.ant-btn-loading').length).toBe(0);
wrapper.setProps({ loading: { delay: 50 } });
expect(wrapper.findAll('.ant-btn-loading').length).toBe(0);
await sleep(50);
expect(wrapper.findAll('.ant-btn-loading').length).toBe(1);
wrapper.setProps({ loading: false });
await sleep(50);
expect(wrapper.findAll('.ant-btn-loading').length).toBe(0);
expect(() => {
wrapper.destroy();
}).not.toThrow();
});
}); });

1
components/button/button-group.jsx
View File

@ -39,6 +39,7 @@ export default {
break; break;
case 'small': case 'small':
sizeCls = 'sm'; sizeCls = 'sm';
break;
default: default:
break; break;
} }

18
components/button/button.jsx
View File

@ -44,7 +44,19 @@ export default {
const prefixCls = getPrefixCls('btn', customizePrefixCls); const prefixCls = getPrefixCls('btn', customizePrefixCls);
const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false; const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
const sizeCls = sizeMap[size] || ''; // large => lg
// small => sm
let sizeCls = '';
switch (size) {
case 'large':
sizeCls = 'lg';
break;
case 'small':
sizeCls = 'sm';
break;
default:
break;
}
const iconType = sLoading ? 'loading' : icon; const iconType = sLoading ? 'loading' : icon;
const children = filterEmpty($slots.default); const children = filterEmpty($slots.default);
return { return {
@ -123,8 +135,8 @@ export default {
return child; return child;
}, },
isNeedInserted() { isNeedInserted() {
const { icon, $slots } = this; const { icon, $slots, type } = this;
return $slots.default && $slots.default.length === 1 && !icon; return $slots.default && $slots.default.length === 1 && !icon && type !== 'link';
}, },
}, },
render() { render() {

1
components/button/demo/icon.md
View File

@ -14,6 +14,7 @@ If you want specific control over the positioning and placement of the `Icon`, t
<template> <template>
<div> <div>
<a-button type="primary" shape="circle" icon="search"></a-button> <a-button type="primary" shape="circle" icon="search"></a-button>
<a-button type="primary" shape="circle">A</a-button>
<a-button type="primary" icon="search">Search</a-button> <a-button type="primary" icon="search">Search</a-button>
<a-button shape="circle" icon="search" /> <a-button shape="circle" icon="search" />
<a-button icon="search">Search</a-button> <a-button icon="search">Search</a-button>

2
components/button/demo/loading.md
View File

@ -26,8 +26,8 @@ A loading indicator can be added to a button by setting the `loading` property o
</a-button> </a-button>
<br /> <br />
<a-button type="primary" loading /> <a-button type="primary" loading />
<a-button shape="circle" loading />
<a-button type="primary" shape="circle" loading /> <a-button type="primary" shape="circle" loading />
<a-button type="danger" shape="round" loading />
</div> </div>
</template> </template>
<script> <script>

4
components/button/demo/size.md
View File

@ -25,8 +25,10 @@ If a large or small button is desired, set the `size` property to either `large`
<a-button type="danger" :size="size">Danger</a-button> <a-button type="danger" :size="size">Danger</a-button>
<a-button type="link" :size="size">Link</a-button> <a-button type="link" :size="size">Link</a-button>
<br /> <br />
<a-button type="primary" icon="download" :size="size" />
<a-button type="primary" shape="circle" icon="download" :size="size" /> <a-button type="primary" shape="circle" icon="download" :size="size" />
<a-button type="primary" shape="round" icon="download" :size="size">Download</a-button> <a-button type="primary" shape="round" icon="download" :size="size" />Download</a-button>
<a-button type="primary" shape="round" icon="download" :size="size" />
<a-button type="primary" icon="download" :size="size">Download</a-button> <a-button type="primary" icon="download" :size="size">Download</a-button>
<br /> <br />
<a-button-group :size="size"> <a-button-group :size="size">

30
components/button/index.en-US.md
View File

@ -2,25 +2,25 @@
To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`. To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
| Property | Description | Type | Default | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| disabled | disabled state of button | boolean | `false` | | disabled | disabled state of button | boolean | `false` | |
| ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | false | | ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | false | |
| htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | | htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
| icon | set the icon of button, see: Icon component | string | - | | icon | set the icon of button, see: Icon component | string | - | |
| loading | set the loading status of button | boolean \| { delay: number } | false | | loading | set the loading status of button | boolean \| { delay: number } | false | |
| shape | can be set to `circle`, `round` or omitted | string | - | | shape | can be set to `circle`, `round` or omitted | string | - | |
| size | can be set to `small` `large` or omitted | string | `default` | | size | can be set to `small` `large` or omitted | string | `default` | |
| type | can be set to `primary` `ghost` `dashed` `danger` `link` or omitted (meaning `default`) | string | `default` | | type | can be set to `primary` `ghost` `dashed` `danger` `link` or omitted (meaning `default`) | string | `default` | |
| block | option to fit button width to its parent width | boolean | `false` | | block | option to fit button width to its parent width | boolean | `false` | |
### events ### events
| Events Name | Description | Arguments | | Events Name | Description | Arguments | Version |
| ----------- | --------------------------------------- | --------------- | | ----------- | --------------------------------------- | --------------- | ------- |
| click | set the handler to handle `click` event | (event) => void | | click | set the handler to handle `click` event | (event) => void | |
`<Button>Hello world!</Button>` will be rendered into `<button><span>Hello world!</span></button>`, and all the properties which are not listed above will be transferred to the `<button>` tag. `<Button href="http://example.com">Hello world!</Button>` will be rendered into `<a href="http://example.com"><span>Hello world!</span></a>`. It accepts all props which native buttons support.
## FAQ ## FAQ

30
components/button/index.zh-CN.md
View File

@ -4,25 +4,25 @@
按钮的属性说明如下： 按钮的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | | 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| disabled | 按钮失效状态 | boolean | `false` | | disabled | 按钮失效状态 | boolean | `false` | |
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | | ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
| icon | 设置按钮的图标类型 | string | - | | icon | 设置按钮的图标类型 | string | - | |
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` | | loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` | |
| shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - | | shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - | |
| size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` | | size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` | |
| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link` 或者不设 | string | `default` | | type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link` 或者不设 | string | `default` | |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` | | block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` | |
### 事件 ### 事件
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 | 版本 |
| -------- | ---------------- | --------------- | | -------- | ---------------- | --------------- | ---- |
| click | 点击按钮时的回调 | (event) => void | | click | 点击按钮时的回调 | (event) => void | |
`<a-button>Hello world!</a-button>` 最终会被渲染为 `<button><span>Hello world!</span></button>`，并且除了上表中的属性，其它属性都会直接传到原生 button 上。 `<Button href="http://example.com">Hello world!</Button>` 则会渲染为 `<a href="http://example.com"><span>Hello world!</span></a>`。 支持原生 button 的其他所有属性。
## FAQ ## FAQ

13
tests/shared/mountTest.js Normal file
View File

@ -0,0 +1,13 @@
import { mount } from '@vue/test-utils';
export default function mountTest(Component) {
describe(`mount and unmount`, () => {
// https://github.com/ant-design/ant-design/pull/18441
it(`component could be updated and unmounted without errors`, () => {
const wrapper = mount(Component);
expect(() => {
wrapper.setProps({});
wrapper.destroy();
}).not.toThrow();
});
});
}