From d5bb3e45a2db088c07a6ee34d1a12e85d6a12d84 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Wed, 1 Dec 2021 10:48:51 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix(readTip):=20=E4=BF=AE=E5=A4=8D=E5=BD=93?= =?UTF-8?q?=E7=9B=AE=E6=A0=87=E5=85=83=E7=B4=A0=E5=AE=BD=E5=BA=A6=E5=92=8C?= =?UTF-8?q?=E9=AB=98=E5=BA=A6=E9=83=BD=E4=BD=8E=E4=BA=8E24px=E6=97=B6?= =?UTF-8?q?=EF=BC=8C=E4=BC=9A=E5=AF=B9=E6=A8=A1=E6=9D=BF=E8=BF=9B=E8=A1=8C?= =?UTF-8?q?=E5=81=8F=E7=A7=BB=E9=87=8F=E8=AE=BE=E7=BD=AE=EF=BC=8C=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E5=8F=8B=E5=A5=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/read-tip/src/read-tip-template.tsx | 26 ++++++++++++++----- 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx index ab725c8a..46c3d16c 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -18,11 +18,25 @@ export default defineComponent({ } const temp = ref(null); + const deviation = (x: number) => { + let Deviation = x > 24 ? 0 : -(x / 2) + 2 + if (x <= 10) { + Deviation = -10 + } + + return Deviation + } onMounted(() => { const domBounding = document.querySelector(query).getBoundingClientRect(); - - const distance = 10; + const { width, height } = domBounding + const distance = 10; let positionTop = 0; + + // 当前元素如果小于24px 会对渲染模板进行偏移 以免小箭头对不准指向的当前元素 + const heightDeviation = deviation(height) + const widthDeviation = deviation(width) + + let positionLeft = 0; const targetDom = document.querySelector('.read-tip-container').getBoundingClientRect(); if (rule.appendToBody) { @@ -32,18 +46,18 @@ export default defineComponent({ switch (rule.position) { case 'top': styles.top = positionTop - targetDom.height - distance + 'px'; - styles.left = positionLeft + 'px'; + styles.left = positionLeft + widthDeviation + 'px'; break; case 'left': - styles.top = positionTop + 'px'; + styles.top = positionTop + heightDeviation + 'px'; styles.left = positionLeft - targetDom.width - distance + 'px'; break; case 'bottom': styles.top = positionTop + domBounding.height + distance + 'px' - styles.left = positionLeft + 'px'; + styles.left = positionLeft + widthDeviation + 'px'; break; case 'right': - styles.top = positionTop + 'px'; + styles.top = positionTop + heightDeviation + 'px'; styles.left = positionLeft + domBounding.width + distance + 'px'; break; } -- Gitee From ec247810b93d270f4b084486ec3722a0f414d4df Mon Sep 17 00:00:00 2001 From: panyongxu Date: Wed, 1 Dec 2021 12:03:20 +0800 Subject: [PATCH 2/3] Merge branch 'dev' of gitee.com:devui/vue-devui into panyongxu/readtip --- packages/devui-vue/docs/en-US/components/read-tip/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/devui-vue/docs/en-US/components/read-tip/index.md b/packages/devui-vue/docs/en-US/components/read-tip/index.md index 47d8b0af..a89cfe0e 100644 --- a/packages/devui-vue/docs/en-US/components/read-tip/index.md +++ b/packages/devui-vue/docs/en-US/components/read-tip/index.md @@ -316,9 +316,9 @@ d-read-tip parameters | Parameter | Parameter | Parameter | Parameter | Jump to Demo | Global Config | | -------------------- | ------------------ | ---- | ------------------------------- | ---------------------- | ---------- | -| readTipOptions | ReadTipOptions | -- | Required. Set readtip options. | [Basic Usage](#Basic Usage) | -- | -| readTipOptions.rules | ReadTipRules | -- | Option. Set the content of readtip | [Include Multiple Readtip](#Include Multiple Readtip) | -- | -| contentTemplate | `TemplateRef` | -- | Options. Using template to customize content | [Display Content with Template](#Display Content with Template) | -- | +| readTipOptions | ReadTipOptions | -- | Required. Set readtip options. | [Basic Usage](#basic-usage) | -- | +| readTipOptions.rules | ReadTipRules | -- | Option. Set the content of readtip | [Include Multiple Readtip](#include-multiple-readtip) | -- | +| contentTemplate | `TemplateRef` | -- | Options. Using template to customize content | [Display Content with Template](#display-content-with-template) | -- | -- Gitee From ee104d5d0fbe2667436d32ed11387b5aaa4c84a4 Mon Sep 17 00:00:00 2001 From: panyongxu Date: Wed, 1 Dec 2021 14:12:53 +0800 Subject: [PATCH 3/3] =?UTF-8?q?docs(readTip):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E8=8B=B1=E6=96=87=E6=96=87=E6=A1=A3demo=E8=B7=B3=E8=BD=AC,=20?= =?UTF-8?q?=E5=8F=98=E9=87=8F=E5=8F=82=E6=95=B0=E5=91=BD=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/read-tip/src/read-tip-template.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx index 46c3d16c..5da83d28 100644 --- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx +++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx @@ -19,19 +19,19 @@ export default defineComponent({ const temp = ref(null); const deviation = (x: number) => { - let Deviation = x > 24 ? 0 : -(x / 2) + 2 + let deviationConstant = x > 24 ? 0 : -(x / 2) + 2 if (x <= 10) { - Deviation = -10 + deviationConstant = -10 } - return Deviation + return deviationConstant } onMounted(() => { const domBounding = document.querySelector(query).getBoundingClientRect(); const { width, height } = domBounding const distance = 10; let positionTop = 0; - + // 当前元素如果小于24px 会对渲染模板进行偏移 以免小箭头对不准指向的当前元素 const heightDeviation = deviation(height) const widthDeviation = deviation(width) -- Gitee