diff --git a/packages/components/button/__tests__/button.spec.ts b/packages/components/button/__tests__/button.spec.ts index 6bcf84de3..5485bb0e7 100644 --- a/packages/components/button/__tests__/button.spec.ts +++ b/packages/components/button/__tests__/button.spec.ts @@ -29,6 +29,9 @@ describe('Button', () => { await wrapper.setProps({ mode: 'link' }) expect(wrapper.classes()).toContain('ix-button-link') + expect(wrapper.element.tagName).toEqual('BUTTON') + + await wrapper.setProps({ href: '#' }) expect(wrapper.element.tagName).toEqual('A') }) diff --git a/packages/components/button/src/Button.tsx b/packages/components/button/src/Button.tsx index e09383c41..b4caf7db1 100644 --- a/packages/components/button/src/Button.tsx +++ b/packages/components/button/src/Button.tsx @@ -15,10 +15,12 @@ import { IxIcon } from '@idux/components/icon' import { buttonToken } from './token' import { buttonProps } from './types' +const aProps = ['href', 'target', 'rel', 'download', 'hreflang', 'ping'] + export default defineComponent({ name: 'IxButton', props: buttonProps, - setup(props, { slots }) { + setup(props, { slots, attrs }) { const common = useGlobalConfig('common') const mergedPrefixCls = computed(() => `${common.prefixCls}-button`) const config = useGlobalConfig('button') @@ -69,7 +71,8 @@ export default defineComponent({ children.push({slots.default()}) } - if (mode.value === 'link') { + // 只有在 mode = 'link' 且设置了相关的 attrs 时,才渲染成 a 标签 + if (mode.value === 'link' && Object.keys(attrs).some(attr => aProps.includes(attr))) { return ( {children} diff --git a/packages/components/button/style/index.less b/packages/components/button/style/index.less index 53ed5a74a..96dbb4878 100644 --- a/packages/components/button/style/index.less +++ b/packages/components/button/style/index.less @@ -117,6 +117,7 @@ &-link { background-color: transparent; border-color: transparent; + padding: 0; &:focus, &:hover { @@ -128,6 +129,10 @@ } } + &-link { + color: @button-primary-background-color; + } + &-danger { color: @button-danger-color; border-color: @button-danger-color; @@ -256,7 +261,7 @@ &:hover, &:focus, &:active { - background-color: @button-background-color; + background-color: transparent; border-color: transparent; } } diff --git a/packages/components/card/style/index.less b/packages/components/card/style/index.less index b07a0d536..508e9671a 100644 --- a/packages/components/card/style/index.less +++ b/packages/components/card/style/index.less @@ -188,14 +188,6 @@ border: @card-border-width @card-border-style @color-primary; } } - - .@{idux-prefix}-header { - &-content { - > .@{idux-prefix}-header-suffix { - padding: 0; - } - } - } } @keyframes card-loading { @@ -213,7 +205,7 @@ font-size: @font-size; line-height: calc(@font-size + var(--ix-line-height-gutter)); - > .@{idux-prefix}-header { + > .@{header-prefix} { padding-left: @card-padding; padding-right: @card-padding; } @@ -226,7 +218,7 @@ padding: @card-padding; } - .@{idux-prefix}-header + .@{card-prefix}-body { + .@{header-prefix} + .@{card-prefix}-body { padding-top: 4px; } diff --git a/packages/components/pagination/style/index.less b/packages/components/pagination/style/index.less index fef61d70c..cd4131a91 100644 --- a/packages/components/pagination/style/index.less +++ b/packages/components/pagination/style/index.less @@ -9,7 +9,6 @@ list-style: none; outline: none; user-select: none; - background-color: @pagination-background-color; &-sm { .pagination-size(@pagination-font-size-sm, @pagination-item-padding-sm, @pagination-item-content-size-sm); @@ -74,6 +73,7 @@ &-item { cursor: pointer; + line-height: 1; transition: color var(--ix-transition-duration-fast); &-content { diff --git a/packages/pro/table/style/index.less b/packages/pro/table/style/index.less index cb96060a4..dabb393e9 100644 --- a/packages/pro/table/style/index.less +++ b/packages/pro/table/style/index.less @@ -7,7 +7,6 @@ min-width: 240px; } - .@{header-prefix}, &-search-wrapper, &-select-wrapper, &-tree-wrapper { @@ -15,6 +14,9 @@ } .@{header-prefix} { + padding-left: @spacing-sm; + padding-right: @spacing-sm; + &-title { color: @text-color; font-weight: @font-weight-md; diff --git a/packages/pro/tree/style/index.less b/packages/pro/tree/style/index.less index be1274082..cce873c2d 100644 --- a/packages/pro/tree/style/index.less +++ b/packages/pro/tree/style/index.less @@ -10,7 +10,7 @@ flex-direction: column; overflow: hidden; transition: width @transition-duration-base; - + &-header-wrapper, &-search-wrapper { display: flex; @@ -29,6 +29,7 @@ &-header-wrapper { .@{icon-prefix} { font-size: @pro-tree-header-wrapper-icon-font-size; + line-height: calc(@pro-tree-header-wrapper-icon-font-size + var(--ix-line-height-gutter)); flex: auto; cursor: pointer; display: inline-block; @@ -39,12 +40,6 @@ } } - .@{icon-prefix}, - .@{header-prefix}-content { - height: @pro-tree-header-wrapper-height; - line-height: @pro-tree-header-wrapper-height; - } - & + .@{divider-prefix} { margin: @pro-tree-divider-vertical-spacing @pro-tree-divider-horizontal-spacing; width: calc(100% - @pro-tree-divider-horizontal-spacing * 2);