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

fix: Tooltip containing disabled button does not show #73

pull/165/head
tjz 2018-07-17 21:16:22 +08:00
parent 2d23f276ca
commit 2e1c19471e
3 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@
@btn-prefix-cls: ~"@{ant-prefix}-btn"; @btn-prefix-cls: ~"@{ant-prefix}-btn";
// for compatibile // for compatible
@btn-ghost-color: @text-color; @btn-ghost-color: @text-color;
@btn-ghost-bg: transparent; @btn-ghost-bg: transparent;
@btn-ghost-border: @border-color-base; @btn-ghost-border: @border-color-base;

41
components/button/style/mixin.less
View File

@ -109,7 +109,8 @@
.button-group-base(@btnClassName) { .button-group-base(@btnClassName) {
position: relative; position: relative;
display: inline-block; display: inline-block;
> .@{btnClassName} { > .@{btnClassName},
> span > .@{btnClassName} {
position: relative; position: relative;
line-height: @btn-height-base - 2px; line-height: @btn-height-base - 2px;
@ -126,13 +127,15 @@
} }
// size // size
&-lg > .@{btnClassName} { &-lg > .@{btnClassName},
.button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base); &-lg > span > .@{btnClassName} {
.button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; 0);
line-height: @btn-height-lg - 2px; line-height: @btn-height-lg - 2px;
} }
&-sm > .@{btnClassName} { &-sm > .@{btnClassName},
.button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @btn-border-radius-sm); &-sm > span > .@{btnClassName} {
.button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; 0);
line-height: @btn-height-sm - 2px; line-height: @btn-height-sm - 2px;
> .@{iconfont-css-prefix} { > .@{iconfont-css-prefix} {
font-size: @font-size-base; font-size: @font-size-base;
@ -250,12 +253,17 @@
.@{btnClassName} + &, .@{btnClassName} + &,
span + .@{btnClassName}, span + .@{btnClassName},
.@{btnClassName} + span, .@{btnClassName} + span,
> span + span,
& + .@{btnClassName}, & + .@{btnClassName},
& + & { & + & {
margin-left: -1px; margin-left: -1px;
} }
.@{btnClassName}:not(:first-child):not(:last-child) { .@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) {
border-left-color: transparent;
}
.@{btnClassName} {
border-radius: 0; border-radius: 0;
} }
@ -266,14 +274,27 @@
> .@{btnClassName}:first-child:not(:last-child), > .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} { > span:first-child:not(:last-child) > .@{btnClassName} {
border-bottom-right-radius: 0; border-bottom-left-radius: @btn-border-radius-base;
border-top-right-radius: 0; border-top-left-radius: @btn-border-radius-base;
} }
> .@{btnClassName}:last-child:not(:first-child), > .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} { > span:last-child:not(:first-child) > .@{btnClassName} {
border-bottom-left-radius: 0; border-bottom-right-radius: @btn-border-radius-base;
border-top-left-radius: 0; border-top-right-radius: @btn-border-radius-base;
}
&-sm {
> .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} {
border-bottom-left-radius: @btn-border-radius-sm;
border-top-left-radius: @btn-border-radius-sm;
}
> .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} {
border-bottom-right-radius: @btn-border-radius-sm;
border-top-right-radius: @btn-border-radius-sm;
}
} }
& > & { & > & {

4
components/tooltip/Tooltip.jsx
View File

@ -77,7 +77,9 @@ export default {
// https://github.com/react-component/tooltip/issues/18 // https://github.com/react-component/tooltip/issues/18
getDisabledCompatibleChildren (ele) { getDisabledCompatibleChildren (ele) {
const isAntBtn = ele.componentOptions && ele.componentOptions.Ctor.options.__ANT_BUTTON const isAntBtn = ele.componentOptions && ele.componentOptions.Ctor.options.__ANT_BUTTON
if (((isAntBtn && ele.componentOptions.propsData.disabled) || (ele.tag === 'button' && ele.data && ele.data.attrs.disabled !== false)) && this.isHoverTrigger()) { if (((isAntBtn && (ele.componentOptions.propsData.disabled || ele.componentOptions.propsData.disabled === '')) ||
(ele.tag === 'button' && ele.data && ele.data.attrs.disabled !== false)) &&
this.isHoverTrigger()) {
// Pick some layout related style properties up to span // Pick some layout related style properties up to span
// Prevent layout bugs like https://github.com/ant-design/ant-design/issues/5254 // Prevent layout bugs like https://github.com/ant-design/ant-design/issues/5254
const { picked, omited } = splitObject( const { picked, omited } = splitObject(