From 2dc06debb04188e422bda30b8a0f1df8277e5e95 Mon Sep 17 00:00:00 2001 From: ajuner <106791576@qq.com> Date: Wed, 27 Jan 2021 16:01:26 +0800 Subject: [PATCH 1/2] feat: tooltip support color --- components/tooltip/Tooltip.tsx | 26 +++++++++++++++++++-- components/tooltip/abstractTooltipProps.ts | 1 + components/tooltip/style/index.less | 27 ++++++++++++++++++---- components/vc-tooltip/Content.jsx | 5 ++-- components/vc-tooltip/Tooltip.jsx | 4 +++- 5 files changed, 53 insertions(+), 10 deletions(-) diff --git a/components/tooltip/Tooltip.tsx b/components/tooltip/Tooltip.tsx index 677632c091..b2e6bc7025 100644 --- a/components/tooltip/Tooltip.tsx +++ b/components/tooltip/Tooltip.tsx @@ -1,8 +1,9 @@ -import { defineComponent, ExtractPropTypes, inject } from 'vue'; +import { defineComponent, ExtractPropTypes, inject, CSSProperties } from 'vue'; import VcTooltip from '../vc-tooltip'; import classNames from '../_util/classNames'; import getPlacements from './placements'; import PropTypes from '../_util/vue-types'; +import { PresetColorTypes } from '../_util/colors'; import { hasProp, getComponent, @@ -28,6 +29,8 @@ const splitObject = (obj: any, keys: string[]) => { }; const props = abstractTooltipProps(); +const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`); + const tooltipProps = { ...props, title: PropTypes.VNodeChild, @@ -176,7 +179,13 @@ export default defineComponent({ render() { const { $props, $data, $attrs } = this; - const { prefixCls: customizePrefixCls, openClassName, getPopupContainer } = $props; + const { + prefixCls: customizePrefixCls, + openClassName, + getPopupContainer, + color, + overlayClassName, + } = $props; const { getPopupContainer: getContextPopupContainer } = this.configProvider; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('tooltip', customizePrefixCls); @@ -197,6 +206,16 @@ export default defineComponent({ [openClassName || `${prefixCls}-open`]: sVisible, [child.props && child.props.class]: child.props && child.props.class, }); + const customOverlayClassName = classNames(overlayClassName, { + [`${prefixCls}-${color}`]: color && PresetColorRegex.test(color), + }); + let formattedOverlayInnerStyle: CSSProperties; + let arrowContentStyle: CSSProperties; + if (color && !PresetColorRegex.test(color)) { + formattedOverlayInnerStyle = { backgroundColor: color }; + arrowContentStyle = { backgroundColor: color }; + } + const vcTooltipProps = { ...$attrs, ...$props, @@ -206,6 +225,9 @@ export default defineComponent({ overlay: this.getOverlay(), visible: sVisible, ref: 'tooltip', + overlayClassName: customOverlayClassName, + overlayInnerStyle: formattedOverlayInnerStyle, + arrowContent: , onVisibleChange: this.handleVisibleChange, onPopupAlign: this.onPopupAlign, }; diff --git a/components/tooltip/abstractTooltipProps.ts b/components/tooltip/abstractTooltipProps.ts index 2af8af2a74..be5e1067c7 100644 --- a/components/tooltip/abstractTooltipProps.ts +++ b/components/tooltip/abstractTooltipProps.ts @@ -22,6 +22,7 @@ export default () => ({ 'rightBottom', ), ).def('top'), + color: PropTypes.string, transitionName: PropTypes.string.def('zoom-big-fast'), overlayStyle: PropTypes.object.def(() => ({})), overlayClassName: PropTypes.string, diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less index dd5d548a5f..899a47802a 100644 --- a/components/tooltip/style/index.less +++ b/components/tooltip/style/index.less @@ -73,7 +73,7 @@ background: transparent; pointer-events: none; - &::before { + &-content { position: absolute; top: 0; right: 0; @@ -94,7 +94,7 @@ &-placement-topRight &-arrow { bottom: @tooltip-distance - @tooltip-arrow-rotate-width; - &::before { + &-content { box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%); transform: translateY((-@tooltip-arrow-rotate-width / 2)) rotate(45deg); } @@ -118,7 +118,7 @@ &-placement-rightBottom &-arrow { left: @tooltip-distance - @tooltip-arrow-rotate-width; - &::before { + &-content { box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%); transform: translateX((@tooltip-arrow-rotate-width / 2)) rotate(45deg); } @@ -142,7 +142,7 @@ &-placement-leftBottom &-arrow { right: @tooltip-distance - @tooltip-arrow-rotate-width; - &::before { + &-content { box-shadow: @tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%); transform: translateX((-@tooltip-arrow-rotate-width / 2)) rotate(45deg); } @@ -166,7 +166,7 @@ &-placement-bottomRight &-arrow { top: @tooltip-distance - @tooltip-arrow-rotate-width; - &::before { + &-content { box-shadow: -@tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%); transform: translateY((@tooltip-arrow-rotate-width / 2)) rotate(45deg); } @@ -185,3 +185,20 @@ right: @tooltip-arrow-offset-horizontal; } } + +.generator-tooltip-preset-color(@i: length(@preset-colors)) when (@i > 0) { + .generator-tooltip-preset-color(@i - 1); + @color: extract(@preset-colors, @i); + @lightColor: '@{color}-6'; + .@{tooltip-prefix-cls}-@{color} { + .@{tooltip-prefix-cls}-inner { + background-color: @@lightColor; + } + .@{tooltip-prefix-cls}-arrow { + &-content { + background-color: @@lightColor; + } + } + } +} +.generator-tooltip-preset-color(); diff --git a/components/vc-tooltip/Content.jsx b/components/vc-tooltip/Content.jsx index 2665d3555b..f59d62673d 100644 --- a/components/vc-tooltip/Content.jsx +++ b/components/vc-tooltip/Content.jsx @@ -6,6 +6,7 @@ export default { prefixCls: PropTypes.string, overlay: PropTypes.any, trigger: PropTypes.any, + overlayInnerStyle: PropTypes.any, }, updated() { const { trigger } = this; @@ -14,9 +15,9 @@ export default { } }, render() { - const { overlay, prefixCls } = this; + const { overlay, prefixCls, overlayInnerStyle } = this; return ( -