fix(NotificationPlugin): fix offset (#6087)

* feat(NotificationPlugin): support custom offset

* feat: adjust offset

* chore: stash changelog [ci skip]

---------

Co-authored-by: tdesign-bot <tdesign@tencent.com>

Author: liweijie0812

packages/components/notification/notification-list.tsx

@@ -6,6 +6,11 @@ import { usePrefixClass } from '@tdesign/shared-hooks';
 
 export default defineComponent({
   props: {
+    /**
+     * 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10em', '8rem']
+     */
+    offset: Array<string | number>,
+
     placement: {
       type: String,
       default: 'top-right',
@@ -17,15 +22,27 @@ export default defineComponent({
   setup(props, { expose }) {
     const COMPONENT_NAME = usePrefixClass('notification-list');
 
-    const { placement } = props as NotificationOptions;
+    const { placement, offset } = props as NotificationOptions;
 
     const list: Ref<NotificationOptions[]> = ref([]);
     const notificationList = ref([]);
 
-    const styles = computed(() => ({
-      zIndex: DEFAULT_Z_INDEX,
-      ...PLACEMENT_OFFSET[placement],
-    }));
+    const styles = computed(() => {
+      const style: CSSProperties = {
+        zIndex: DEFAULT_Z_INDEX,
+        ...PLACEMENT_OFFSET[placement],
+      };
+
+      if (Array.isArray(offset) && offset.length === 2) {
+        const horizontalProp = placement.includes('left') ? 'left' : 'right';
+        const verticalProp = placement.includes('top') ? 'top' : 'bottom';
+
+        style[horizontalProp as 'left' | 'right'] = getOffset(offset[0]) ?? style[horizontalProp as 'left' | 'right'];
+        style[verticalProp as 'top' | 'bottom'] = getOffset(offset[1]) ?? style[verticalProp as 'top' | 'bottom'];
+      }
+
+      return style;
+    });
 
     const add = (options: TdNotificationProps): number => {
       list.value.push(options);
@@ -45,15 +62,11 @@ export default defineComponent({
       return isNaN(Number(val)) ? val : `${val}px`;
     };
 
-    const notificationStyles = (item: { offset: NotificationOptions['offset']; zIndex: number }) => {
+    const notificationStyles = (item: { zIndex: number }) => {
       const styles: CSSProperties = {
         marginBottom: DISTANCE,
       };
-      if (item.offset) {
-        styles.position = 'relative';
-        styles.left = getOffset(item.offset[0]);
-        styles.top = getOffset(item.offset[1]);
-      }
+
       if (item.zIndex) styles['z-index'] = item.zIndex;
       return styles;
     };
@@ -91,10 +104,9 @@ export default defineComponent({
 
     return () => {
       if (!list.value.length) return;
-
       return (
         <div class={`${COMPONENT_NAME.value}__show`} style={styles.value}>
-          {list.value.map((item: { offset: NotificationOptions['offset']; zIndex: number; id: number }, index) => (
+          {list.value.map((item: { zIndex: number; id: number }, index) => (
             <Notification ref={addChild} key={item.id} style={notificationStyles(item)} {...getProps(index, item)} />
           ))}
         </div>

packages/components/notification/plugin.ts

@@ -41,6 +41,7 @@ const NotificationFunction = (options: NotificationOptions, context?: AppContext
 
     const instance = createVNode(NotificationList, {
       placement: hackOptions.placement,
+      offset: hackOptions.offset,
     });
 
     // eslint-disable-next-line no-underscore-dangle

packages/tdesign-vue-next/.changelog/pr-6087.md

@@ -0,0 +1,6 @@
+---
+pr_number: 6087
+contributor: liweijie0812
+---
+
+- fix(NotificationPlugin): 优化 `offset` 没有对容器层生效的问题 @liweijie0812 ([#6087](https://github.com/Tencent/tdesign-vue-next/pull/6087))