From 98fa4a033085c0740b6d8da5334fd3ddd92dca56 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Thu, 6 Jun 2024 20:25:36 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3Drag=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=8B=96=E6=8B=BD=E5=90=8E=E4=BC=9A=E5=9C=A8=E5=8E=9F?= =?UTF-8?q?=E5=9C=B0=E7=95=99=E4=B8=80=E4=B8=AA=E9=81=AE=E6=8C=A1=E5=85=83?= =?UTF-8?q?=E7=B4=A0=E9=97=AE=E9=A2=98+=E8=A7=A3=E5=86=B3weapp/taroh5?= =?UTF-8?q?=E5=A4=9A=E4=B8=AAdemo=E6=8B=96=E6=8B=BD=E4=BD=8D=E7=BD=AE?= =?UTF-8?q?=E4=B8=8D=E6=AD=A3=E7=A1=AE=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/drag/demo.taro.tsx | 2 +- src/packages/drag/demos/taro/demo1.tsx | 2 +- src/packages/drag/demos/taro/demo2.tsx | 2 ++ src/packages/drag/demos/taro/demo3.tsx | 1 + src/packages/drag/demos/taro/demo4.tsx | 1 + src/packages/drag/drag.scss | 10 +++++++--- src/packages/drag/drag.taro.tsx | 12 +++++++++--- src/packages/drag/drag.tsx | 11 +++++++++-- 8 files changed, 31 insertions(+), 10 deletions(-) diff --git a/src/packages/drag/demo.taro.tsx b/src/packages/drag/demo.taro.tsx index 09800cecd7..3453ba2c45 100644 --- a/src/packages/drag/demo.taro.tsx +++ b/src/packages/drag/demo.taro.tsx @@ -35,7 +35,7 @@ const DragDemo = () => { return ( <>
-
+

{translated.basic}

diff --git a/src/packages/drag/demos/taro/demo1.tsx b/src/packages/drag/demos/taro/demo1.tsx index 956bac39ff..dfc7b69728 100644 --- a/src/packages/drag/demos/taro/demo1.tsx +++ b/src/packages/drag/demos/taro/demo1.tsx @@ -3,7 +3,7 @@ import { Drag, Button } from '@nutui/nutui-react-taro' const Demo1 = () => { return ( - + ) diff --git a/src/packages/drag/demos/taro/demo2.tsx b/src/packages/drag/demos/taro/demo2.tsx index 959b2f3ccd..f46256820a 100644 --- a/src/packages/drag/demos/taro/demo2.tsx +++ b/src/packages/drag/demos/taro/demo2.tsx @@ -10,6 +10,7 @@ const Demo2 = () => { top: '200px', left: '8px', }} + className="drag-demo21" > @@ -19,6 +20,7 @@ const Demo2 = () => { top: '200px', right: '50px', }} + className="drag-demo22" > diff --git a/src/packages/drag/demos/taro/demo3.tsx b/src/packages/drag/demos/taro/demo3.tsx index 1beaf5a852..87be2fbfa4 100644 --- a/src/packages/drag/demos/taro/demo3.tsx +++ b/src/packages/drag/demos/taro/demo3.tsx @@ -10,6 +10,7 @@ const Demo3 = () => { top: '275px', left: '0px', }} + className="drag-demo3" > diff --git a/src/packages/drag/demos/taro/demo4.tsx b/src/packages/drag/demos/taro/demo4.tsx index 2d5df941c1..7ac2923b44 100644 --- a/src/packages/drag/demos/taro/demo4.tsx +++ b/src/packages/drag/demos/taro/demo4.tsx @@ -27,6 +27,7 @@ const Demo4 = () => { }} /> diff --git a/src/packages/drag/drag.scss b/src/packages/drag/drag.scss index 4875abc705..ec167762d3 100644 --- a/src/packages/drag/drag.scss +++ b/src/packages/drag/drag.scss @@ -1,10 +1,14 @@ .nut-drag { position: fixed; - display: inline-flex; z-index: 9997 !important; - width: fit-content; - height: fit-content; + width: 0; + height: 0; touch-action: none; user-select: none; font-size: 0; + &-inner { + display: inline-flex; + width: fit-content; + height: fit-content; + } } diff --git a/src/packages/drag/drag.taro.tsx b/src/packages/drag/drag.taro.tsx index 2242714b11..5773b1024c 100644 --- a/src/packages/drag/drag.taro.tsx +++ b/src/packages/drag/drag.taro.tsx @@ -1,6 +1,7 @@ import React, { FunctionComponent, useState, useEffect, useRef } from 'react' import { getSystemInfoSync, createSelectorQuery } from '@tarojs/taro' import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { getRectByTaro } from '@/utils/get-rect-by-taro' export interface DragProps extends BasicComponent { attract: boolean @@ -45,20 +46,24 @@ export const Drag: FunctionComponent< const translateY = useRef(0) const middleLine = useRef(0) - const getInfo = () => { + const getInfo = async () => { const el = myDrag.current if (el) { const { top, left, bottom, right } = boundary const { screenWidth, windowHeight } = getSystemInfoSync() + const { width, height } = await getRectByTaro(dragRef.current) + dragRef.current && dragRef.current.getBoundingClientRect() + + console.log('width', width, 'height', height) createSelectorQuery() .select(`.${className}`) .boundingClientRect((rec: any) => { setBoundaryState({ top: -rec.top + top, left: -rec.left + left, - bottom: windowHeight - rec.height - rec.top - bottom, - right: screenWidth - rec.width - rec.left - right, + bottom: windowHeight - rec.top - bottom - Math.ceil(height), + right: screenWidth - rec.left - right - Math.ceil(width), }) middleLine.current = @@ -135,6 +140,7 @@ export const Drag: FunctionComponent< ref={myDrag} >
touchStart(event)} ref={dragRef} onTouchMove={touchMove} diff --git a/src/packages/drag/drag.tsx b/src/packages/drag/drag.tsx index fc2155fa49..cb76fdd9b7 100644 --- a/src/packages/drag/drag.tsx +++ b/src/packages/drag/drag.tsx @@ -45,7 +45,10 @@ export const Drag: FunctionComponent< const getInfo = () => { const el = myDrag.current if (el) { - const { offsetWidth, offsetHeight, offsetTop, offsetLeft } = el + const { offsetTop, offsetLeft } = el + const { offsetWidth, offsetHeight } = el.querySelector( + `.${classPrefix}-inner` + ) as HTMLDivElement const { clientWidth, clientHeight } = document.documentElement const { top, left, bottom, right } = boundary setBoundaryState({ @@ -94,7 +97,11 @@ export const Drag: FunctionComponent< {...reset} ref={myDrag} > - + {children}
From df3f513242035693245488d0abdbd6446cb70caa Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 12 Jun 2024 09:28:27 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=E5=8D=95=E5=85=83?= =?UTF-8?q?=E6=B5=8B=E8=AF=95+=E7=A7=BB=E9=99=A4log?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/drag/__test__/__snapshots__/drag.spec.tsx.snap | 1 + src/packages/drag/drag.taro.tsx | 4 +--- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/packages/drag/__test__/__snapshots__/drag.spec.tsx.snap b/src/packages/drag/__test__/__snapshots__/drag.spec.tsx.snap index e39f5dfd9d..c84ad9cc8c 100644 --- a/src/packages/drag/__test__/__snapshots__/drag.spec.tsx.snap +++ b/src/packages/drag/__test__/__snapshots__/drag.spec.tsx.snap @@ -11,6 +11,7 @@ exports[`Drag > should render default slot correctly 1`] = ` exports[`Drag > touch move 1`] = `
{