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);