mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-02 20:18:22 +08:00
fix: button
Fixed the issue that when the href property is undefined, the Button will also be rendered as a anchor. Fixed the issue that Edge throws an error when setting the loading property.
This commit is contained in:
parent
7dbf5ed4d7
commit
7422026674
@ -38,4 +38,6 @@ exports[`Button renders Chinese characters correctly 5`] = `
|
||||
|
||||
exports[`Button renders correctly 1`] = `<button type="button" class="ant-btn ant-btn-default"><span>Follow</span></button>`;
|
||||
|
||||
exports[`Button should support link button 1`] = `<a target="_blank" href="http://ant.design" type="button" class="ant-btn ant-btn-default"><span>link button</span></a>`;
|
||||
exports[`Button should not render as link button when href is undefined 1`] = `<button type="button" class="ant-btn ant-btn-primary"><span>button</span></button>`;
|
||||
|
||||
exports[`Button should support link button 1`] = `<a target="_blank" href="http://ant.design" class="ant-btn ant-btn-default"><span>link button</span></a>`;
|
||||
|
@ -173,4 +173,15 @@ describe('Button', () => {
|
||||
})
|
||||
expect(wrapper2.html()).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('should not render as link button when href is undefined', async () => {
|
||||
const wrapper = mount({
|
||||
render () {
|
||||
return (
|
||||
<Button type='primary' href={undefined}>button</Button>
|
||||
)
|
||||
},
|
||||
})
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
@ -3,13 +3,13 @@ import Icon from '../icon'
|
||||
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/
|
||||
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
|
||||
import buttonTypes from './buttonTypes'
|
||||
import { filterEmpty } from '../_util/props-util'
|
||||
const props = buttonTypes()
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
name: 'AButton',
|
||||
__ANT_BUTTON: true,
|
||||
props: {
|
||||
...props,
|
||||
},
|
||||
props,
|
||||
data () {
|
||||
return {
|
||||
sizeMap: {
|
||||
@ -48,13 +48,15 @@ export default {
|
||||
computed: {
|
||||
classes () {
|
||||
const { prefixCls, type, shape, size, hasTwoCNChar,
|
||||
sLoading, ghost, block, sizeMap } = this
|
||||
sLoading, ghost, block, sizeMap, icon, $slots } = this
|
||||
const sizeCls = sizeMap[size] || ''
|
||||
const children = filterEmpty($slots.default)
|
||||
return {
|
||||
[`${prefixCls}`]: true,
|
||||
[`${prefixCls}-${type}`]: type,
|
||||
[`${prefixCls}-${shape}`]: shape,
|
||||
[`${prefixCls}-${sizeCls}`]: sizeCls,
|
||||
[`${prefixCls}-icon-only`]: !children && children !== 0 && icon,
|
||||
[`${prefixCls}-loading`]: sLoading,
|
||||
[`${prefixCls}-background-ghost`]: ghost || type === 'ghost',
|
||||
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar,
|
||||
@ -106,11 +108,8 @@ export default {
|
||||
disabled, handleClick,
|
||||
sLoading, $slots, $attrs, $listeners } = this
|
||||
const buttonProps = {
|
||||
props: {
|
||||
},
|
||||
attrs: {
|
||||
...$attrs,
|
||||
type: htmlType,
|
||||
disabled,
|
||||
},
|
||||
class: classes,
|
||||
@ -123,7 +122,7 @@ export default {
|
||||
const iconNode = iconType ? <Icon type={iconType} /> : null
|
||||
const kids = $slots.default && $slots.default.length === 1 ? this.insertSpace($slots.default[0], this.isNeedInserted()) : $slots.default
|
||||
|
||||
if ('href' in $attrs) {
|
||||
if ($attrs.href !== undefined) {
|
||||
return (
|
||||
<a {...buttonProps} ref='buttonNode'>
|
||||
{iconNode}{kids}
|
||||
@ -132,7 +131,7 @@ export default {
|
||||
} else {
|
||||
return (
|
||||
<Wave>
|
||||
<button {...buttonProps} ref='buttonNode'>
|
||||
<button {...buttonProps} ref='buttonNode' type={htmlType || 'button'}>
|
||||
{iconNode}{kids}
|
||||
</button>
|
||||
</Wave>
|
||||
|
Loading…
Reference in New Issue
Block a user