feat: update button
tangjinzhou
parent
0ddb385785
commit
7b2fdd9051
|
|
@ -1,5 +1,5 @@
|
|||
module.exports = {
|
||||
dev: {
|
||||
componentName: 'badge', // dev components
|
||||
componentName: 'button', // dev components
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `<div style="
|
|||
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="">
|
||||
<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>
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
</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>
|
||||
</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">
|
||||
<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>
|
||||
`;
|
||||
|
||||
|
|
@ -77,11 +77,15 @@ exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
|
|||
|
||||
exports[`renders ./components/button/demo/size.md correctly 1`] = `
|
||||
<div>
|
||||
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper 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>
|
||||
</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>
|
||||
</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>
|
||||
</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="">
|
||||
|
|
|
|||
|
|
@ -3,8 +3,12 @@ import Icon from '../../icon';
|
|||
import { mount } from '@vue/test-utils';
|
||||
import Vue from 'vue';
|
||||
import { asyncExpect } from '@/tests/utils';
|
||||
import { sleep } from '../../../tests/utils';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
|
||||
describe('Button', () => {
|
||||
mountTest(Button);
|
||||
mountTest(Button.Group);
|
||||
it('renders correctly', () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
|
|
@ -148,7 +152,20 @@ describe('Button', () => {
|
|||
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', () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
|
|
@ -197,4 +214,26 @@ describe('Button', () => {
|
|||
});
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ export default {
|
|||
break;
|
||||
case 'small':
|
||||
sizeCls = 'sm';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,19 @@ export default {
|
|||
const prefixCls = getPrefixCls('btn', customizePrefixCls);
|
||||
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 children = filterEmpty($slots.default);
|
||||
return {
|
||||
|
|
@ -123,8 +135,8 @@ export default {
|
|||
return child;
|
||||
},
|
||||
isNeedInserted() {
|
||||
const { icon, $slots } = this;
|
||||
return $slots.default && $slots.default.length === 1 && !icon;
|
||||
const { icon, $slots, type } = this;
|
||||
return $slots.default && $slots.default.length === 1 && !icon && type !== 'link';
|
||||
},
|
||||
},
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ If you want specific control over the positioning and placement of the `Icon`, t
|
|||
<template>
|
||||
<div>
|
||||
<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 shape="circle" icon="search" />
|
||||
<a-button icon="search">Search</a-button>
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ A loading indicator can be added to a button by setting the `loading` property o
|
|||
</a-button>
|
||||
<br />
|
||||
<a-button type="primary" loading />
|
||||
<a-button shape="circle" loading />
|
||||
<a-button type="primary" shape="circle" loading />
|
||||
<a-button type="danger" shape="round" loading />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -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="link" :size="size">Link</a-button>
|
||||
<br />
|
||||
<a-button type="primary" 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>
|
||||
<br />
|
||||
<a-button-group :size="size">
|
||||
|
|
|
|||
|
|
@ -2,25 +2,25 @@
|
|||
|
||||
To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| disabled | disabled state of button | 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` |
|
||||
| icon | set the icon of button, see: Icon component | string | - |
|
||||
| loading | set the loading status of button | boolean \| { delay: number } | false |
|
||||
| shape | can be set to `circle`, `round` or omitted | string | - |
|
||||
| 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` |
|
||||
| block | option to fit button width to its parent width | boolean | `false` |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| disabled | disabled state of button | 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` | |
|
||||
| icon | set the icon of button, see: Icon component | string | - | |
|
||||
| loading | set the loading status of button | boolean \| { delay: number } | false | |
|
||||
| shape | can be set to `circle`, `round` or omitted | string | - | |
|
||||
| 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` | |
|
||||
| block | option to fit button width to its parent width | boolean | `false` | |
|
||||
|
||||
### events
|
||||
|
||||
| Events Name | Description | Arguments |
|
||||
| ----------- | --------------------------------------- | --------------- |
|
||||
| click | set the handler to handle `click` event | (event) => void |
|
||||
| Events Name | Description | Arguments | Version |
|
||||
| ----------- | --------------------------------------- | --------------- | ------- |
|
||||
| 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
|
||||
|
||||
|
|
|
|||
|
|
@ -4,25 +4,25 @@
|
|||
|
||||
按钮的属性说明如下：
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| disabled | 按钮失效状态 | boolean | `false` |
|
||||
| ghost | 幽灵属性，使按钮背景透明 | boolean | false |
|
||||
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
|
||||
| icon | 设置按钮的图标类型 | string | - |
|
||||
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |
|
||||
| shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - |
|
||||
| size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |
|
||||
| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link` 或者不设 | string | `default` |
|
||||
| block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` |
|
||||
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| disabled | 按钮失效状态 | boolean | `false` | |
|
||||
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
||||
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
|
||||
| icon | 设置按钮的图标类型 | string | - | |
|
||||
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` | |
|
||||
| shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - | |
|
||||
| size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` | |
|
||||
| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link` 或者不设 | string | `default` | |
|
||||
| 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
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue