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

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

@ -55,17 +55,19 @@ const itemDrag = (
onmove(e);
};
if ("ontouchmove" in document.documentElement === true) {
document.ontouchmove = (e: TouchEvent) => {
if (e.changedTouches && e.changedTouches.length) {
onmove({
movementX: 1,
movementY: 1,
clientX: e.changedTouches[0].clientX,
clientY: e.changedTouches[0].clientY,
});
}
};
if ((<any>window).touchPriority) {
if ("ontouchmove" in document.documentElement === true) {
document.ontouchmove = (e: TouchEvent) => {
if (e.changedTouches && e.changedTouches.length) {
onmove({
movementX: 1,
movementY: 1,
clientX: e.changedTouches[0].clientX,
clientY: e.changedTouches[0].clientY,
});
}
};
}
}
const onmoveend = (e: any) => {
@ -94,8 +96,10 @@ const itemDrag = (
};
document.onmouseup = onmoveend;
if ("ontouchend" in document.documentElement === true) {
document.ontouchend = (e) => onmoveend(e);
if ((<any>window).touchPriority) {
if ("ontouchend" in document.documentElement === true) {
document.ontouchend = (e) => onmoveend(e);
}
}
};
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)`,
};
});
// pad 放大拖拽的点
let targetResizeIconSize = props.resizeIconSize;
if ((<any>window).isPad) {
targetResizeIconSize *= 1.5;
}
const dragElResizeIcon = computed(() => {
return [
{
class: "drag-lt",
style: {
top: -(props.resizeIconSize / 2) + "px",
left: -(props.resizeIconSize / 2) + "px",
width: props.resizeIconSize + "px",
height: props.resizeIconSize + "px",
top: -(targetResizeIconSize / 2) + "px",
left: -(targetResizeIconSize / 2) + "px",
width: targetResizeIconSize + "px",
height: targetResizeIconSize + "px",
},
},
{
class: "drag-ct",
style: {
top: -(props.resizeIconSize / 2) + "px",
left: <number>style.width / 2 - props.resizeIconSize / 2 + "px",
width: props.resizeIconSize + "px",
height: props.resizeIconSize + "px",
top: -(targetResizeIconSize / 2) + "px",
left: <number>style.width / 2 - targetResizeIconSize / 2 + "px",
width: targetResizeIconSize + "px",
height: targetResizeIconSize + "px",
},
},
{
class: "drag-rt",
style: {
top: -(props.resizeIconSize / 2) + "px",
right: -(props.resizeIconSize / 2) + "px",
width: props.resizeIconSize + "px",
height: props.resizeIconSize + "px",
top: -(targetResizeIconSize / 2) + "px",
right: -(targetResizeIconSize / 2) + "px",
width: targetResizeIconSize + "px",
height: targetResizeIconSize + "px",
},
},
{
class: "drag-rc",
style: {
top: <number>style.height / 2 - props.resizeIconSize / 2 + "px",
right: -(props.resizeIconSize / 2) + "px",
width: props.resizeIconSize + "px",
height: props.resizeIconSize + "px",
top: <number>style.height / 2 - targetResizeIconSize / 2 + "px",
right: -(targetResizeIconSize / 2) + "px",
width: targetResizeIconSize + "px",
height: targetResizeIconSize + "px",
},
},
{
class: "drag-rb",
style: {
bottom: -(props.resizeIconSize / 2) + "px",
right: -(props.resizeIconSize / 2) + "px",
width: props.resizeIconSize + "px",
height: props.resizeIconSize + "px",
bottom: -(targetResizeIconSize / 2) + "px",
right: -(targetResizeIconSize / 2) + "px",
width: targetResizeIconSize + "px",
height: targetResizeIconSize + "px",
},
},
{
class: "drag-bc",
style: {
bottom: -(props.resizeIconSize / 2) + "px",
left: <number>style.width / 2 - props.resizeIconSize / 2 + "px",
width: props.resizeIconSize + "px",
height: props.resizeIconSize + "px",
bottom: -(targetResizeIconSize / 2) + "px",
left: <number>style.width / 2 - targetResizeIconSize / 2 + "px",
width: targetResizeIconSize + "px",
height: targetResizeIconSize + "px",
},
},
{
class: "drag-lb",
style: {
bottom: -(props.resizeIconSize / 2) + "px",
left: -(props.resizeIconSize / 2) + "px",
width: props.resizeIconSize + "px",
height: props.resizeIconSize + "px",
bottom: -(targetResizeIconSize / 2) + "px",
left: -(targetResizeIconSize / 2) + "px",
width: targetResizeIconSize + "px",
height: targetResizeIconSize + "px",
},
},
{
class: "drag-lc",
style: {
top: <number>style.height / 2 - props.resizeIconSize / 2 + "px",
left: -(props.resizeIconSize / 2) + "px",
width: props.resizeIconSize + "px",
height: props.resizeIconSize + "px",
top: <number>style.height / 2 - targetResizeIconSize / 2 + "px",
left: -(targetResizeIconSize / 2) + "px",
width: targetResizeIconSize + "px",
height: targetResizeIconSize + "px",
},
},
];

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

@ -100,17 +100,19 @@ const itemResize = (
};
document.onmousemove = onmove;
if ("ontouchmove" in document.documentElement === true) {
document.ontouchmove = (e: TouchEvent) => {
if (e.changedTouches && e.changedTouches.length) {
onmove({
movementX: 1,
movementY: 1,
clientX: e.changedTouches[0].clientX,
clientY: e.changedTouches[0].clientY,
});
}
};
if ((<any>window).touchPriority) {
if ("ontouchmove" in document.documentElement === true) {
document.ontouchmove = (e: TouchEvent) => {
if (e.changedTouches && e.changedTouches.length) {
onmove({
movementX: 1,
movementY: 1,
clientX: e.changedTouches[0].clientX,
clientY: e.changedTouches[0].clientY,
});
}
};
}
}
const onmoveend = (e: any) => {
@ -139,8 +141,10 @@ const itemResize = (
};
document.onmouseup = onmoveend;
if ("ontouchend" in document.documentElement === true) {
document.ontouchend = (e) => onmoveend(e);
if ((<any>window).touchPriority) {
if ("ontouchend" in document.documentElement === true) {
document.ontouchend = (e) => onmoveend(e);
}
}
};
export default itemResize;

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

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