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 类型定义