lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加触摸事件优先级变量

This commit is contained in:
fangxiang 2022-04-15 11:24:59 +08:00
parent f76e31ef5a
commit c76d964ffd
4 changed files with 80 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/drag.ts
View File

@ -55,6 +55,7 @@ const itemDrag = (
onmove(e); onmove(e);
}; };
if ((<any>window).touchPriority) {
if ("ontouchmove" in document.documentElement === true) { if ("ontouchmove" in document.documentElement === true) {
document.ontouchmove = (e: TouchEvent) => { document.ontouchmove = (e: TouchEvent) => {
if (e.changedTouches && e.changedTouches.length) { if (e.changedTouches && e.changedTouches.length) {
@ -67,6 +68,7 @@ const itemDrag = (
} }
}; };
} }
}
const onmoveend = (e: any) => { const onmoveend = (e: any) => {
moveing.value = false; moveing.value = false;
@ -94,8 +96,10 @@ const itemDrag = (
}; };
document.onmouseup = onmoveend; document.onmouseup = onmoveend;
if ((<any>window).touchPriority) {
if ("ontouchend" in document.documentElement === true) { if ("ontouchend" in document.documentElement === true) {
document.ontouchend = (e) => onmoveend(e); document.ontouchend = (e) => onmoveend(e);
} }
}
}; };
export default itemDrag; export default itemDrag;

70
src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/renderData.ts
View File

@ -30,78 +30,84 @@ function render(props: any) {
transform: `rotate(${style.rotate}deg)`, transform: `rotate(${style.rotate}deg)`,
}; };
}); });
// pad 放大拖拽的点
let targetResizeIconSize = props.resizeIconSize;
if ((<any>window).isPad) {
targetResizeIconSize *= 1.5;
}
const dragElResizeIcon = computed(() => { const dragElResizeIcon = computed(() => {
return [ return [
{ {
class: "drag-lt", class: "drag-lt",
style: { style: {
top: -(props.resizeIconSize / 2) + "px", top: -(targetResizeIconSize / 2) + "px",
left: -(props.resizeIconSize / 2) + "px", left: -(targetResizeIconSize / 2) + "px",
width: props.resizeIconSize + "px", width: targetResizeIconSize + "px",
height: props.resizeIconSize + "px", height: targetResizeIconSize + "px",
}, },
}, },
{ {
class: "drag-ct", class: "drag-ct",
style: { style: {
top: -(props.resizeIconSize / 2) + "px", top: -(targetResizeIconSize / 2) + "px",
left: <number>style.width / 2 - props.resizeIconSize / 2 + "px", left: <number>style.width / 2 - targetResizeIconSize / 2 + "px",
width: props.resizeIconSize + "px", width: targetResizeIconSize + "px",
height: props.resizeIconSize + "px", height: targetResizeIconSize + "px",
}, },
}, },
{ {
class: "drag-rt", class: "drag-rt",
style: { style: {
top: -(props.resizeIconSize / 2) + "px", top: -(targetResizeIconSize / 2) + "px",
right: -(props.resizeIconSize / 2) + "px", right: -(targetResizeIconSize / 2) + "px",
width: props.resizeIconSize + "px", width: targetResizeIconSize + "px",
height: props.resizeIconSize + "px", height: targetResizeIconSize + "px",
}, },
}, },
{ {
class: "drag-rc", class: "drag-rc",
style: { style: {
top: <number>style.height / 2 - props.resizeIconSize / 2 + "px", top: <number>style.height / 2 - targetResizeIconSize / 2 + "px",
right: -(props.resizeIconSize / 2) + "px", right: -(targetResizeIconSize / 2) + "px",
width: props.resizeIconSize + "px", width: targetResizeIconSize + "px",
height: props.resizeIconSize + "px", height: targetResizeIconSize + "px",
}, },
}, },
{ {
class: "drag-rb", class: "drag-rb",
style: { style: {
bottom: -(props.resizeIconSize / 2) + "px", bottom: -(targetResizeIconSize / 2) + "px",
right: -(props.resizeIconSize / 2) + "px", right: -(targetResizeIconSize / 2) + "px",
width: props.resizeIconSize + "px", width: targetResizeIconSize + "px",
height: props.resizeIconSize + "px", height: targetResizeIconSize + "px",
}, },
}, },
{ {
class: "drag-bc", class: "drag-bc",
style: { style: {
bottom: -(props.resizeIconSize / 2) + "px", bottom: -(targetResizeIconSize / 2) + "px",
left: <number>style.width / 2 - props.resizeIconSize / 2 + "px", left: <number>style.width / 2 - targetResizeIconSize / 2 + "px",
width: props.resizeIconSize + "px", width: targetResizeIconSize + "px",
height: props.resizeIconSize + "px", height: targetResizeIconSize + "px",
}, },
}, },
{ {
class: "drag-lb", class: "drag-lb",
style: { style: {
bottom: -(props.resizeIconSize / 2) + "px", bottom: -(targetResizeIconSize / 2) + "px",
left: -(props.resizeIconSize / 2) + "px", left: -(targetResizeIconSize / 2) + "px",
width: props.resizeIconSize + "px", width: targetResizeIconSize + "px",
height: props.resizeIconSize + "px", height: targetResizeIconSize + "px",
}, },
}, },
{ {
class: "drag-lc", class: "drag-lc",
style: { style: {
top: <number>style.height / 2 - props.resizeIconSize / 2 + "px", top: <number>style.height / 2 - targetResizeIconSize / 2 + "px",
left: -(props.resizeIconSize / 2) + "px", left: -(targetResizeIconSize / 2) + "px",
width: props.resizeIconSize + "px", width: targetResizeIconSize + "px",
height: props.resizeIconSize + "px", height: targetResizeIconSize + "px",
}, },
}, },
]; ];

4
src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/resize.ts
View File

@ -100,6 +100,7 @@ const itemResize = (
}; };
document.onmousemove = onmove; document.onmousemove = onmove;
if ((<any>window).touchPriority) {
if ("ontouchmove" in document.documentElement === true) { if ("ontouchmove" in document.documentElement === true) {
document.ontouchmove = (e: TouchEvent) => { document.ontouchmove = (e: TouchEvent) => {
if (e.changedTouches && e.changedTouches.length) { if (e.changedTouches && e.changedTouches.length) {
@ -112,6 +113,7 @@ const itemResize = (
} }
}; };
} }
}
const onmoveend = (e: any) => { const onmoveend = (e: any) => {
if (!move_flag) { if (!move_flag) {
@ -139,8 +141,10 @@ const itemResize = (
}; };
document.onmouseup = onmoveend; document.onmouseup = onmoveend;
if ((<any>window).touchPriority) {
if ("ontouchend" in document.documentElement === true) { if ("ontouchend" in document.documentElement === true) {
document.ontouchend = (e) => onmoveend(e); document.ontouchend = (e) => onmoveend(e);
} }
}
}; };
export default itemResize; export default itemResize;

7
src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue
View File

@ -31,7 +31,6 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, reactive, ref, watch } from "vue"; import { computed, defineComponent, reactive, ref, watch } from "vue";
import { styleIf } from "../../types/style";
import renderFn from "./func/renderData"; import renderFn from "./func/renderData";
import props from "./func/props"; import props from "./func/props";
import watchProps from "./func/watchProps"; import watchProps from "./func/watchProps";
@ -93,16 +92,18 @@ export default defineComponent({
itemDrag(ev, emit, props, style, moveing); itemDrag(ev, emit, props, style, moveing);
}; };
const itemTouch = (ev: TouchEvent) => { const itemTouch = (ev: TouchEvent) => {
if ((<any>window).touchPriority) {
if (ev.changedTouches && ev.changedTouches.length) { if (ev.changedTouches && ev.changedTouches.length) {
(ev as any).clientX = ev.changedTouches[0].clientX; (ev as any).clientX = ev.changedTouches[0].clientX;
(ev as any).clientY = ev.changedTouches[0].clientY; (ev as any).clientY = ev.changedTouches[0].clientY;
} }
onItemSelect(ev); onItemSelect(ev);
}
}; };
const itemDown = (ev: any) => { const itemDown = (ev: any) => {
if ("touchstart" in document.documentElement === true) { if ((<any>window).touchPriority) {
ev.return; return;
} }
onItemSelect(ev); onItemSelect(ev);
}; };