feat(Tooltip): 支持自定义弹出层样式

Author: CoderTongxin

packages/devui-vue/devui/tooltip/src/tooltip-types.ts

@@ -52,6 +52,10 @@ export const tooltipProps = {
  type: Number,
  default: 0,
  },
+ overlayClass: {
+ type: String,
+ default: '',
+ },
 };
 
 export type TooltipProps = ExtractPropTypes<typeof tooltipProps>;

packages/devui-vue/devui/tooltip/src/tooltip.tsx

@@ -11,7 +11,7 @@ export default defineComponent({
  name: 'DTooltip',
  props: tooltipProps,
  setup(props: TooltipProps, { slots }) {
- const { showAnimation, content, align } = toRefs(props);
+ const { showAnimation, content, align, overlayClass } = toRefs(props);
  const origin = ref<HTMLElement>();
  const tooltipRef = ref<HTMLElement>();
  const { visible, placement, positionArr, overlayStyles, onPositionChange, onMouseleave, onMouseenterOverlay } = useTooltip(
@@ -23,6 +23,7 @@ export default defineComponent({
  [ns.b()]: true,
  [ns.m(placement.value)]: true,
  [ns.m('with-content')]: slots.content,
+ [overlayClass.value]: true,
  }));
  provide(POPPER_TRIGGER_TOKEN, origin);
 

packages/devui-vue/docs/components/tooltip/index.md

@@ -81,7 +81,7 @@ export default defineComponent({
 
 :::
 
-### 使用content插槽
+### 使用 content 插槽
 
 :::demo
 
@@ -91,7 +91,7 @@ export default defineComponent({
  <d-tooltip>
  <d-button>Overflow Hidden</d-button>
  <template #content>
- <div class="tooltip-box">{{message}}</div>
+ <div class="tooltip-box">{{ message }}</div>
  </template>
  </d-tooltip>
  </div>
@@ -103,7 +103,9 @@ import { defineComponent, ref } from 'vue';
 export default defineComponent({
  setup() {
  return {
- message: ref('规范的组件化目的不是为了限制创造，而是为了创造者更确定、科学、高效。所有行为决策的价值归依为产品业务。产品业务永远比组件化本身更重要，业务第一。规范不是绝对、教条、冷漠、强制的，实际工作中总会有新增需求、存量优化空间、情感化设计需求超出一般通用规范。保持克制的同时，允许基于强烈业务需求的规范突破；之后如果有足够的理由迭代出组件，那么就进行组件化。'),
+ message: ref(
+ '规范的组件化目的不是为了限制创造，而是为了创造者更确定、科学、高效。所有行为决策的价值归依为产品业务。产品业务永远比组件化本身更重要，业务第一。规范不是绝对、教条、冷漠、强制的，实际工作中总会有新增需求、存量优化空间、情感化设计需求超出一般通用规范。保持克制的同时，允许基于强烈业务需求的规范突破；之后如果有足够的理由迭代出组件，那么就进行组件化。'
+ ),
  };
  },
 });
@@ -127,18 +129,20 @@ export default defineComponent({
 | :---------------- | :------------------------------------------------- | :----- | :------------------------------------------------ | :-------------------- |
 | content | `string` | -- | 可选，Tooltip 显示内容 | [基本用法](#基本用法) |
 | position | [BasePlacement \| BasePlacement[]](#baseplacement) | top | 可选，Tooltip 显示位置 | [基本用法](#基本用法) |
+| align | `start \| end \| null` | null | 可选，对齐方式，默认居中对齐。 | |
 | show-animation | `boolean` | true | 可选，是否显示动画 | [基本用法](#基本用法) |
 | mouse-enter-delay | `number` | 150 | 可选，鼠标移入后延时多久才显示 Tooltip，单位是 ms | [延时触发](#延时触发) |
 | mouse-leave-delay | `number` | 100 | 可选，鼠标移出后延时多久才隐藏 Tooltip，单位是 ms | [延时触发](#延时触发) |
 | disabled | `boolean` | false | 可选，Tooltip 是否可用 | [基本用法](#基本用法) |
 | enterable | `boolean` | true | 可选，鼠标是否可以进入到 tooltip 中 | [基本用法](#基本用法) |
 | hide-after | `number` | 0 | 可选，tooltip 出现后自动隐藏延时，单位为 ms | [基本用法](#基本用法) |
+| overlay-class | `string` | '' | 可选，自定义弹出层的样式 | |
 
 ### Tooltip 插槽
 
-| 插槽名 | 说明 |
-| :------ | :--------------------- |
-| default | 默认插槽，设置触发元素 |
+| 插槽名 | 说明  |
+| :------ | :------------------------- |
+| default | 默认插槽，设置触发元素  |
 | content | 内容插槽，自定义内容与样式 |
 
 ### Tooltip 类型定义