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

fix: add button loading animation

pull/4301/head
tangjinzhou 2021-06-30 16:13:05 +08:00
parent aa05d369e1
commit da10933cd3
3 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/button/__tests__/__snapshots__/index.test.js.snap
View File

@ -36,9 +36,9 @@ exports[`Button renders Chinese characters correctly 3`] = `
</button> </button>
`; `;
exports[`Button renders Chinese characters correctly 4`] = `<button class="ant-btn ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><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 00-94.3-139.9 437.71 437.71 0 00-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></span></span><span>按 钮</span></button>`; exports[`Button renders Chinese characters correctly 4`] = `<button class="ant-btn ant-btn-loading" type="button"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><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 00-94.3-139.9 437.71 437.71 0 00-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></span><span>按 钮</span></button>`;
exports[`Button renders Chinese characters correctly 5`] = `<button class="ant-btn ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><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 00-94.3-139.9 437.71 437.71 0 00-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></span></span><span>按 钮</span></button>`; exports[`Button renders Chinese characters correctly 5`] = `<button class="ant-btn ant-btn-loading" type="button"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><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 00-94.3-139.9 437.71 437.71 0 00-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></span><span>按 钮</span></button>`;
exports[`Button renders Chinese characters correctly 6`] = ` exports[`Button renders Chinese characters correctly 6`] = `
<button class="ant-btn ant-btn-two-chinese-chars" type="button"> <button class="ant-btn ant-btn-two-chinese-chars" type="button">

8
components/button/button.tsx
View File

@ -176,13 +176,7 @@ export default defineComponent({
onClick: handleClick, onClick: handleClick,
}; };
const iconNode = innerLoading.value ? ( const iconNode = innerLoading.value ? <LoadingOutlined /> : icon;
<span class={`${prefixCls.value}-loading-icon`}>
<LoadingOutlined />
</span>
) : (
icon
);
const kids = children.map(child => const kids = children.map(child =>
insertSpace(child, isNeedInserted && autoInsertSpace.value), insertSpace(child, isNeedInserted && autoInsertSpace.value),

46
components/button/style/index.less
View File

@ -155,25 +155,39 @@
} }
} }
& > &-loading-icon { &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
transition: all 0.3s @ease-in-out; padding-left: 29px;
.@{iconfont-css-prefix}:not(:last-child) {
.@{iconfont-css-prefix} { margin-left: -14px;
padding-right: @padding-xs;
animation: none;
// for smooth button padding transition
svg {
animation: loadingCircle 1s infinite linear;
}
}
&:only-child {
.@{iconfont-css-prefix} {
padding-right: 0;
}
} }
} }
&-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
padding-left: 24px;
.@{iconfont-css-prefix} {
margin-left: -17px;
}
}
// & > &-loading-icon {
// transition: all 0.3s @ease-in-out;
// .@{iconfont-css-prefix} {
// padding-right: @padding-xs;
// animation: none;
// // for smooth button padding transition
// svg {
// animation: loadingCircle 1s infinite linear;
// }
// }
// &:only-child {
// .@{iconfont-css-prefix} {
// padding-right: 0;
// }
// }
// }
&-group { &-group {
.btn-group(@btn-prefix-cls); .btn-group(@btn-prefix-cls);
} }