chore: release 1.8.4-naruto (#3017)

* fix(table): uploadFilePercent does not work with autoUpload=false (#2991) * fix(table): uploadFilePercent * fix: lint eorr * fix(upload): image preview * feat(card): card组件支持传入loadingProps参数 (#2959) * feat(card): card组件支持传入loadingProps参数 card组件支持传入loadingProps参数 fix #423 * chore: merge develop * feat(card): card组件支持传入loadingProps参数 card组件支持传入loadingProps参数 fix #423 * refactor(card): props属性用法优化 * chore: update snapshot * chore: update snapshot --------- Co-authored-by: Uyarn <[email protected]> * fix(table): affixed bugs, filter icon highlight bug (#2990) * fix(table): affixed bugs * fix(table): fix filter can not highlight with number 0 * chore: fix pagination text (#2996) * fix(radio): the checked state also triggers the change event (#3000) * fix(radio): the checked state also triggers the change event * test(radio): the checked state also triggers the change event * docs: update FAQ (#3002) * docs: update FAQ * chore: update docs * fix(textarea): 公共组件当初始处于隐藏状态再次可视后未做高度再计算的问题 (#3003) * fix(textarea.tsx): 修复textarea在折叠面板内时，高度计算不正确，会出现滚动条的问题修复用户反馈issue"[Textarea] textarea在折叠面板内时，高度计算不正确，会出现滚动条",issue详情见:#2809 * fix(textarea.tsx): 修复t-textarea公共组件在初始被隐藏时没有做高度计算的问题 t-textarea在部分场景比如t-collapse-panel中使用时,初始化加载时该组件没有高度,但是当再次可视时因为没有再次做高度的计算导致没有获得响应式高度因此出现这个问题. * feat: provide a method to calculate the height of textArea component after DOM mounted (#3006) * fix(textarea.tsx): 修复textarea在折叠面板内时，高度计算不正确，会出现滚动条的问题修复用户反馈issue"[Textarea] textarea在折叠面板内时，高度计算不正确，会出现滚动条",issue详情见:#2809 * fix(textarea.tsx): 修复t-textarea公共组件在初始被隐藏时没有做高度计算的问题 t-textarea在部分场景比如t-collapse-panel中使用时,初始化加载时该组件没有高度,但是当再次可视时因为没有再次做高度的计算导致没有获得响应式高度因此出现这个问题. * fix(textarea.tsx): provide a method to calculate the height of textArea component after DOM mounted Provide a method to calculate the height of textArea component after DOM mounted * chore(deps-dev): bump @typescript-eslint/typescript-estree (#3009) --- updated-dependencies: - dependency-name: "@typescript-eslint/typescript-estree" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(imageviewer): 添加defaultScale (#3013) 添加defaultScale * docs: update popup plugin demo (#3014) * fix(upload): form disabled should effect upload trigger button (#3012) * fix(upload): form disabled should effect upload trigger button * chore: update snapshot * chore: release 1.8.4 (#3015) * chore: release 1.8.4 * chore: changelog's changes --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: update snapshot --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: sheepluo <[email protected]> Co-authored-by: iiimix <[email protected]> Co-authored-by: betavs <[email protected]> Co-authored-by: 梓晨 <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: sinbadmaster <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tencent · Jan 2, 2024 · 15b0113 · 15b0113
1 parent 0fb83a3
commit 15b0113
Show file tree

Hide file tree

Showing 26 changed files with 344 additions and 80 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,29 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.8.4 `2024-01-02` 
+### 🚀 Features
+- `Upload`: 手动上传场景，支持进行粘贴上传 @chaishi ([#2991](https://github.com/Tencent/tdesign-vue/pull/2991))
+- `Card`: 支持传入`loadingProps`参数修改加载状态的展示 @iiimix ([#2959](https://github.com/Tencent/tdesign-vue/pull/2959))
+
+### 🐞 Bug Fixes
+- `Upload`: @chaishi 
+   - 修复手动上传时，无法更新上传进度问题 ([#2991](https://github.com/Tencent/tdesign-vue/pull/2991))
+    - 修复图片预览时，无法切换预览图片问题 ([#2991](https://github.com/Tencent/tdesign-vue/pull/2991))
+- `Table`: @chaishi 
+    - 横向滚动场景，修复吸顶表头在移动端无法跟随滚动的问题 [#2976](https://github.com/Tencent/tdesign-vue/issues/2976) ([#2990](https://github.com/Tencent/tdesign-vue/pull/2990))
+    - 横向滚动场景，修复横向滚动在有惯性滚动浏览器中的滚动的问题 ([#2990](https://github.com/Tencent/tdesign-vue/pull/2990))
+   -  横向滚动场景，修复在 Windows 场景中，按下鼠标（不松开鼠标）横向滚动时，表头没有跟随滚动的问题 ([#2990](https://github.com/Tencent/tdesign-vue/pull/2990))
+   -  修复可筛选表格，修复筛选值为 `0` 时，筛选图表没有高亮的问题，[#2987](https://github.com/Tencent/tdesign-vue/issues/2987)  ([#2990](https://github.com/Tencent/tdesign-vue/pull/2990))
+- `Pagination`: 将总数单位 `项` 改为 `条` , 保持内容一致性 @dinghuihua ([#2996](https://github.com/Tencent/tdesign-vue/pull/2996))
+- `Radio`: 处理选中状态也会触发 `change` 事件的问题 @betavs ([#3000](https://github.com/Tencent/tdesign-vue/pull/3000))
+- `Textarea`: 修复组件初始处于隐藏状态，可视后未做高度再计算的问题 @azx1573 ([#3003](https://github.com/Tencent/tdesign-vue/pull/3003))
+- `ImageViewer`: 添加defaultScale @sinbadmaster ([#3013](https://github.com/Tencent/tdesign-vue/pull/3013))
+- `Upload`: 修复 `Form` 的 `disabled` 属性没有作用到上传组件部分按钮的问题 @uyarn ([#3012](https://github.com/Tencent/tdesign-vue/pull/3012))
+- `Select`: 修复`naruto`版本`minCollapsedNum`与`disabled` API的功能异常问题  @uyarn
+### 🚧 Others
+- `Popup`: 丰富插件使用方式的使用示例 @uyarn ([#3014](https://github.com/Tencent/tdesign-vue/pull/3014))
+
 ## 🌈 1.8.3 `2023-12-15` 
 ### 🚀 Features
 - `Upload`: 新增支持 `uploadPastedFiles`，用于控制是否允许用户粘贴文件上传，默认允许 @chaishi ([#2966](https://github.com/Tencent/tdesign-vue/pull/2966))

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-vue",
   "purename": "tdesign",
-  "version": "1.8.3-naruto",
+  "version": "1.8.4-naruto",
   "description": "tdesign-vue",
   "title": "tdesign-vue",
   "keywords": [
@@ -125,7 +125,7 @@
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/experimental-utils": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
-    "@typescript-eslint/typescript-estree": "^5.4.0",
+    "@typescript-eslint/typescript-estree": "^6.16.0",
     "@vitejs/plugin-vue2-jsx": "^1.1.0",
     "@vitest/coverage-c8": "^0.28.3",
     "@vitest/ui": "^0.24.3",

diff --git a/site/docs/getting-started.md b/site/docs/getting-started.md
@@ -192,4 +192,4 @@ Q: 为什么使用有些组件的时候会出现一些奇怪的错误？
 
 A: 使用组件的时候看到这类错误 `vue.runtime.esm.js:4605 [Vue warn]: inject() can only be used inside setup() or functional components.` 说明虽然 `package.json` 中设置的版本号为 `^2.6.14`，但实际上安装了 Vue2.7 的版本，可以在 `node_modules` 目录中检查实际安装的版本号。
 
-由于 Vue2.7 和 Vue2.6 不兼容，请务必确保自己安装的版本号是 Vue2.6.x。如果您确实需要使用 Vue2.7 请安装 `tdesign-vue@naruto`
+由于 tdesign-vue 正常版本中使用的 `@vue/composition-api`，无法在 Vue2.7 中使用，使用 tdesign-vue 正常版本时，请确保自己安装的版本号是 Vue2.6.x。如果您确实需要使用 Vue2.7 请安装 `tdesign-vue@naruto`
diff --git a/src/card/_example/custom-loading-props.vue b/src/card/_example/custom-loading-props.vue
@@ -0,0 +1,20 @@
+<template>
+  <t-card bordered :title="title" :loading="isLoading" :style="{ width: '400px' }" :loading-props="customProps">
+    {{ infoMessage }}
+  </t-card>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: '自定义loadingProps Card',
+      isLoading: true,
+      customProps: {
+        text: 'TDesign努力加载中...',
+      },
+      infoMessage: '卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。',
+    };
+  },
+};
+</script>
diff --git a/src/card/card.en-US.md b/src/card/card.en-US.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Card Props
 
 name | type | default | description | required
@@ -17,9 +18,10 @@ header | String / Slot / Function | - | Typescript：`string \| TNode`。[see mo
 headerBordered | Boolean | false | \- | N
 hoverShadow | Boolean | false | \- | N
 loading | Boolean / Slot / Function | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+loadingProps | Object | - | Loading Component Props。Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/card/type.ts) | N
 shadow | Boolean | false | \- | N
-size | String | medium | options：medium/small | N
+size | String | medium | options: medium/small | N
 status | String | - | \- | N
 subtitle | String / Slot / Function | - | card subtitle。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-theme | String | normal | options：normal/poster1/poster2 | N
+theme | String | normal | options: normal/poster1/poster2 | N
 title | String / Slot / Function | - | card title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
diff --git a/src/card/card.md b/src/card/card.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Card Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -17,6 +18,7 @@ header | String / Slot / Function | - | 卡片顶部内容，优先级高于其
 headerBordered | Boolean | false | 头部是否带分割线，仅在有header时有效 | N
 hoverShadow | Boolean | false | hover时是否有阴影 | N
 loading | Boolean / Slot / Function | false | 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+loadingProps | Object | - | 透传加载组件(Loading)全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/card/type.ts) | N
 shadow | Boolean | false | 是否显示卡片阴影，默认不显示 | N
 size | String | medium | 尺寸。可选项：medium/small | N
 status | String | - | 卡片状态内容，仅在操作区域不在顶部时有效（即 `theme=poster2` ） | N

diff --git a/src/card/card.tsx b/src/card/card.tsx
@@ -136,16 +136,7 @@ export default defineComponent({
     },
   },
   render() {
-    if (this.loading) {
-      return renderTNodeJSX(this, 'loading', {
-        defaultNode: (
-          <TLoading>
-            <div class={this.baseCls}></div>
-          </TLoading>
-        ),
-      });
-    }
-    return (
+    const content = (
       <div class={this.baseCls}>
         {this.isHeaderRender ? this.renderHeader() : null}
         {this.showCover ? this.renderCover() : null}
@@ -158,5 +149,12 @@ export default defineComponent({
         )}
       </div>
     );
+
+    if (this.loading) {
+      return renderTNodeJSX(this, 'loading', {
+        defaultNode: <t-loading props={this.loadingProps}>{content}</t-loading>,
+      });
+    }
+    return content;
   },
 });
diff --git a/src/card/props.ts b/src/card/props.ts
@@ -54,6 +54,10 @@ export default {
     type: [Boolean, Function] as PropType<TdCardProps['loading']>,
     default: false,
   },
+  /** 透传加载组件(Loading)全部属性 */
+  loadingProps: {
+    type: Object as PropType<TdCardProps['loadingProps']>,
+  },
   /** 是否显示卡片阴影，默认不显示 */
   shadow: Boolean,
   /** 尺寸 */

diff --git a/src/card/type.ts b/src/card/type.ts
@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { LoadingProps } from '../loading';
 import { TNode } from '../common';
 
 export interface TdCardProps {
@@ -59,6 +60,10 @@ export interface TdCardProps {
    * @default false
    */
   loading?: boolean | TNode;
+  /**
+   * 透传加载组件(Loading)全部属性
+   */
+  loadingProps?: LoadingProps;
   /**
    * 是否显示卡片阴影，默认不显示
    * @default false

diff --git a/src/hooks/useVirtualScrollNew.ts b/src/hooks/useVirtualScrollNew.ts
@@ -161,7 +161,7 @@ const useVirtualScroll = (container: Ref<HTMLElement>, params: UseVirtualScrollP
 
   // 固定高度场景，可直接通过数据长度计算出最大滚动高度
   watch(
-    () => [[...params.value.data, tScroll, isVirtualScroll, container]],
+    () => [[...params.value.data, tScroll.value, isVirtualScroll.value, container.value]],
     () => {
       if (!isVirtualScroll.value) return;
       const { data } = params.value;

diff --git a/src/image-viewer/const.ts b/src/image-viewer/const.ts
@@ -6,4 +6,11 @@ export const enum EVENT_CODE {
   esc = 'Escape',
 }
 
+export const DEFAULT_IMAGE_SCALE = {
+  max: 2,
+  min: 0.5,
+  step: 0.5,
+  defaultScale: 1,
+};
+
 export default EVENT_CODE;
diff --git a/src/image-viewer/hooks.ts b/src/image-viewer/hooks.ts
@@ -1,5 +1,6 @@
-import { ref } from 'vue';
+import { ref, ComputedRef } from 'vue';
 import { ImageScale } from './type';
+import { DEFAULT_IMAGE_SCALE } from './const';
 
 interface InitTransform {
   translateX: number;
@@ -47,20 +48,17 @@ export function useMirror() {
   return { mirror, onMirror, resetMirror };
 }
 
-export function useScale(imageScale: ImageScale = { max: 2, min: 0.5, step: 0.5 }) {
-  const { max, min, step } = imageScale;
-  const scale = ref(1);
-  const onZoomIn = () => {
-    setScale(scale.value + step);
-  };
-  const onZoomOut = () => {
-    setScale(scale.value - step);
-  };
-  const resetScale = () => {
-    scale.value = 1;
-  };
+export function useScale(imageScale: ComputedRef<ImageScale>) {
+  const {
+    max = DEFAULT_IMAGE_SCALE.max,
+    min = DEFAULT_IMAGE_SCALE.min,
+    defaultScale = DEFAULT_IMAGE_SCALE.defaultScale,
+  } = imageScale.value;
+  const scaleVal = Math.min(Math.max(defaultScale, min), max);
+  const scale = ref(scaleVal);
 
   const setScale = (newScale: number) => {
+    const { max = DEFAULT_IMAGE_SCALE.max, min = DEFAULT_IMAGE_SCALE.min } = imageScale.value;
     let value = newScale;
     if (newScale < min) {
       value = min;
@@ -71,6 +69,18 @@ export function useScale(imageScale: ImageScale = { max: 2, min: 0.5, step: 0.5
     scale.value = value;
   };
 
+  const onZoomIn = () => {
+    const { step = DEFAULT_IMAGE_SCALE.step } = imageScale.value;
+    setScale(scale.value + step);
+  };
+  const onZoomOut = () => {
+    const { step = DEFAULT_IMAGE_SCALE.step } = imageScale.value;
+    setScale(scale.value - step);
+  };
+  const resetScale = () => {
+    scale.value = scaleVal;
+  };
+
   return {
     scale,
     onZoomIn,

diff --git a/src/image-viewer/image-viewer.en-US.md b/src/image-viewer/image-viewer.en-US.md
@@ -9,7 +9,7 @@ closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。
 closeOnEscKeydown | Boolean | true | trigger image viewer close event on `ESC` keydown | N
 closeOnOverlay | Boolean | - | \- | N
 draggable | Boolean | undefined | \- | N
-imageScale | Object | - | Typescript：`ImageScale` `interface ImageScale { max: number; min: number; step: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
+imageScale | Object | - | Typescript：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
 images | Array | [] | Typescript：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | `.sync` is supported | N
 defaultIndex | Number | 0 | uncontrolled property | N

diff --git a/src/image-viewer/image-viewer.md b/src/image-viewer/image-viewer.md
@@ -9,7 +9,7 @@ closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为
 closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发图片预览器关闭事件 | N
 closeOnOverlay | Boolean | - | 是否在点击遮罩层时，触发预览关闭 | N
 draggable | Boolean | undefined | 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 | N
-imageScale | Object | - |  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度。TS 类型：`ImageScale` `interface ImageScale { max: number; min: number; step: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
+imageScale | Object | - |  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例。TS 类型：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
 images | Array | [] | 图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。示例: `['img_url_1', 'img_url_2']`，`[{ thumbnail: 'small_image_url', mainImage: 'big_image_url', download: false }]`。TS 类型：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | 当前预览图片所在的下标。支持语法糖 `.sync` | N
 defaultIndex | Number | 0 | 当前预览图片所在的下标。非受控属性 | N

diff --git a/src/image-viewer/image-viewer.tsx b/src/image-viewer/image-viewer.tsx
@@ -16,7 +16,7 @@ import { setTransform } from '../utils/helper';
 import { TdImageViewerProps } from './type';
 import { useMirror, useRotate, useScale } from './hooks';
 import { formatImages, getOverlay } from './utils';
-import { EVENT_CODE } from './const';
+import { EVENT_CODE, DEFAULT_IMAGE_SCALE } from './const';
 import Image from '../image';
 
 export default defineComponent({
@@ -61,10 +61,11 @@ export default defineComponent({
       isExpand.value = !isExpand.value;
     };
 
+    const imageScaleRef = computed(() => props.imageScale ?? DEFAULT_IMAGE_SCALE);
     const { mirror, onMirror, resetMirror } = useMirror();
     const {
       scale, onZoomIn, onZoomOut, resetScale,
-    } = useScale(props.imageScale);
+    } = useScale(imageScaleRef);
     const { rotate, onRotate, resetRotate } = useRotate();
     const onRest = () => {
       resetMirror();
@@ -236,6 +237,7 @@ export default defineComponent({
                 >
                   <Image
                     alt=""
+                    error=""
                     src={image.thumbnail || image.mainImage}
                     class={`${this.COMPONENT_NAME}__header-img`}
                     onClick={() => this.onImgClick(index)}

diff --git a/src/image-viewer/type.ts b/src/image-viewer/type.ts
@@ -98,6 +98,7 @@ export interface ImageScale {
   max: number;
   min: number;
   step: number;
+  defaultScale?: number;
 }
 
 export interface ImageInfo {

diff --git a/src/popup/_example/plugin.vue b/src/popup/_example/plugin.vue
@@ -1,8 +1,15 @@
 <template>
-  <t-space>
-    <t-button variant="outline" @click="handleElement1" class="trigger-element1">已渲染的节点1</t-button>
-    <t-button variant="outline" @click="handleElement2" class="trigger-element2">已渲染的节点2</t-button>
-    <t-button variant="outline" @click="handleElement3" class="trigger-element3">已渲染的节点3</t-button>
+  <t-space direction="vertical">
+    <t-button variant="outline" @click="handleElement1" class="trigger-element1">正常的方式打开</t-button>
+    <t-button variant="outline" @click="handleElement2" class="trigger-element2"
+    >通过Plugin打开，并修改不同浮层的配置</t-button
+    >
+    <div>
+      <span>这里是一个日志查询的例子，在很长的日志内容中，日志内容存在换行的情况，可以点击链接进行日志查询操作</span>
+      <a class="trigger-element3" style="color: var(--td-text-color-brand)" @click="handleCreatePopupOffset"
+      >点击此链接，会打开浮层进行跳转操作</a
+      >
+    </div>
   </t-space>
 </template>
 
@@ -12,27 +19,49 @@ import { PopupPlugin } from 'tdesign-vue';
 export default {
   methods: {
     handleElement1() {
-      this.$popup('.trigger-element1', '渲染文本内容', {
-        placement: 'bottom',
-        showArrow: true,
-        trigger: 'hover',
-        destroyOnClose: true,
-      });
+      this.$popup('.trigger-element1', '渲染文本的内容');
     },
     handleElement2() {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      this.$popup('.trigger-element2', (h) => <div>渲染的是DOM节点</div>, {
-        placement: 'top',
-        trigger: 'click',
+      PopupPlugin('.trigger-element2', '渲染文本的内容', {
+        placement: 'right',
+        showArrow: false,
       });
     },
-    handleElement3() {
-      PopupPlugin('.trigger-element3', '渲染文本内容', {
-        placement: 'right',
-        showArrow: true,
-        trigger: 'hover',
+    handleCreatePopupOffset() {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      this.$popup('.trigger-element3', (h) => <div>透传popperOptions，在offset里控制节点位置</div>, {
+        placement: 'bottom',
+        popperOptions: {
+          modifiers: [
+            {
+              name: 'offset',
+              trigger: 'click',
+              options: {
+                offset: ({ reference }) => {
+                  const target = document.querySelector('.trigger-element2');
+                  let { lineHeight } = getComputedStyle(target);
+                  if (lineHeight === 'normal') {
+                    const temp = document.createElement('div');
+                    temp.innerText = 't';
+                    document.body.appendChild(temp);
+                    lineHeight = `${temp.offsetHeight}px`;
+                    document.body.removeChild(temp);
+                  }
+                  const isBreakLine = reference.height > parseInt(lineHeight, 10);
+                  return isBreakLine ? [reference.x, -reference.height + 10] : [0, 0];
+                },
+              },
+            },
+          ],
+        },
       });
     },
   },
 };
 </script>
+<style scoped>
+.trigger-element3 {
+  text-decoration: underline;
+  cursor: pointer;
+}
+</style>