From e15f7f63773233ecd5b062622c7759db162caf47 Mon Sep 17 00:00:00 2001 From: kuaifan Date: Thu, 2 Jun 2022 23:21:48 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E9=95=BF=E6=8C=89/=E5=8F=B3?= =?UTF-8?q?=E9=94=AE=E6=8C=87=E4=BB=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/assets/js/directives/longpress.js | 31 +++++++++++++------ resources/assets/js/pages/manage.vue | 20 ++++++++---- .../pages/manage/components/ProjectList.vue | 3 +- resources/assets/js/pages/manage/file.vue | 14 ++++++++- .../assets/js/pages/manage/messenger.vue | 24 +++----------- 5 files changed, 55 insertions(+), 37 deletions(-) diff --git a/resources/assets/js/directives/longpress.js b/resources/assets/js/directives/longpress.js index d397fe1f5..33932ad9b 100644 --- a/resources/assets/js/directives/longpress.js +++ b/resources/assets/js/directives/longpress.js @@ -1,10 +1,7 @@ const isSupportTouch = "ontouchend" in document; -// 长按指令 +// 长按或右键指令 const longpress = { bind: function (el, binding) { - if (!isSupportTouch) { - return - } let delay = 500, callback = binding.value; if ($A.isJson(binding.value)) { @@ -15,6 +12,17 @@ const longpress = { throw 'callback must be a function' } + // 不支持touch时使用右键 + if (!isSupportTouch) { + el.__longpressContextmenu__ = (e) => { + e.preventDefault() + e.stopPropagation() + callback(e, el) + } + el.addEventListener('contextmenu', el.__longpressContextmenu__); + return + } + // 定义变量 let pressTimer = null let isCall = false @@ -27,7 +35,7 @@ const longpress = { if (pressTimer === null) { pressTimer = setTimeout(() => { isCall = true - callback(e, el) + callback(e.touches[0], el) }, delay) } } @@ -50,20 +58,25 @@ const longpress = { el.addEventListener('touchstart', el.__longpressStart__) // 取消计时器 el.addEventListener('click', el.__longpressClick__) - el.addEventListener('touchmove', el.__longpressCancel__); + el.addEventListener('touchmove', el.__longpressCancel__) el.addEventListener('touchend', el.__longpressCancel__) el.addEventListener('touchcancel', el.__longpressCancel__) }, // 指令与元素解绑的时候，移除事件绑定 unbind(el) { + if (!isSupportTouch) { + el.removeEventListener('contextmenu', el.__longpressContextmenu__) + delete el.__longpressContextmenu__ + return + } el.removeEventListener('touchstart', el.__longpressStart__) el.removeEventListener('click', el.__longpressClick__) el.removeEventListener('touchmove', el.__longpressCancel__) el.removeEventListener('touchend', el.__longpressCancel__) el.removeEventListener('touchcancel', el.__longpressCancel__) - delete el.__longpressStart__; - delete el.__longpressClick__; - delete el.__longpressCancel__; + delete el.__longpressStart__ + delete el.__longpressClick__ + delete el.__longpressCancel__ } } diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue index 05e735160..f258e61a5 100644 --- a/resources/assets/js/pages/manage.vue +++ b/resources/assets/js/pages/manage.vue @@ -163,8 +163,9 @@ :ref="`project_${item.id}`" :key="key" :class="classNameProject(item)" + :data-id="item.id" @click="toggleRoute('project', {projectId: item.id})" - @contextmenu.prevent.stop="handleContextmenu($event, item)"> + v-longpress="handleLongpress">
{{item.name}}
@@ -382,6 +383,7 @@ import MobileBack from "../components/Mobile/Back"; import TaskMenu from "./manage/components/TaskMenu"; import MobileNotification from "../components/Mobile/Notification"; import MeetingManager from "./manage/components/MeetingManager"; +import longpress from "../directives/longpress"; export default { components: { @@ -399,6 +401,7 @@ export default { ProjectManagement, TeamManagement, ProjectArchived}, + directives: {longpress}, data() { return { loadIng: 0, @@ -995,16 +998,21 @@ export default { }, typeof timeout === "number" ? timeout : 1000) }, - handleContextmenu(event, item) { + handleLongpress(event, el) { + const projectId = $A.getAttr(el, 'data-id') + const projectItem = this.projectLists.find(item => item.id == projectId) + if (!projectItem) { + return + } this.operateVisible = false; - this.operateItem = $A.isJson(item) ? item : {}; + this.operateItem = $A.isJson(projectItem) ? projectItem : {}; this.$nextTick(() => { - const dialogRect = this.$refs[`project_${item.id}`][0].getBoundingClientRect(); + const projectRect = el.getBoundingClientRect(); const wrapRect = this.$refs.projectWrapper.getBoundingClientRect(); this.operateStyles = { left: `${event.clientX - wrapRect.left}px`, - top: `${dialogRect.top}px`, - height: dialogRect.height + 'px', + top: `${projectRect.top}px`, + height: projectRect.height + 'px', } this.operateVisible = true; }) diff --git a/resources/assets/js/pages/manage/components/ProjectList.vue b/resources/assets/js/pages/manage/components/ProjectList.vue index ff179fbae..026e95887 100644 --- a/resources/assets/js/pages/manage/components/ProjectList.vue +++ b/resources/assets/js/pages/manage/components/ProjectList.vue @@ -171,13 +171,12 @@ export default { }); }, - handleLongpress(touchEvent, el) { + handleLongpress(event, el) { const projectId = $A.getAttr(el, 'data-id') const projectItem = this.projectLists.find(item => item.id == projectId) if (!projectItem) { return } - const event = touchEvent.touches[0]; this.operateVisible = false; this.operateItem = $A.isJson(projectItem) ? projectItem : {}; this.$nextTick(() => { diff --git a/resources/assets/js/pages/manage/file.vue b/resources/assets/js/pages/manage/file.vue index aae55f3e3..bc9a942bf 100644 --- a/resources/assets/js/pages/manage/file.vue +++ b/resources/assets/js/pages/manage/file.vue @@ -80,7 +80,8 @@ shear: shearIds.includes(item.id), highlight: selectIds.includes(item.id), }" - @contextmenu.prevent.stop="handleRightClick($event, item)" + :data-id="item.id" + v-longpress="handleLongpress" @click="dropFile(item, 'openCheckMenu')">
@@ -369,12 +370,14 @@ import {sortBy} from "lodash"; import UserInput from "../../components/UserInput"; import DrawerOverlay from "../../components/DrawerOverlay"; import PreviewImage from "../../components/PreviewImage"; +import longpress from "../../directives/longpress"; const FilePreview = () => import('./components/FilePreview'); const FileContent = () => import('./components/FileContent'); export default { components: {PreviewImage, FilePreview, DrawerOverlay, UserInput, FileContent}, + directives: {longpress}, data() { return { loadIng: 0, @@ -894,6 +897,15 @@ export default { this.autoBlur(id) }, + handleLongpress(event, el) { + const fileId = $A.getAttr(el, 'data-id') + const fileItem = this.fileList.find(item => item.id == fileId) + if (!fileItem) { + return + } + this.handleRightClick(event, fileItem) + }, + handleRightClick(event, item, isAddButton) { this.contextMenuItem = $A.isJson(item) ? item : {}; if (this.contextMenuVisible) { diff --git a/resources/assets/js/pages/manage/messenger.vue b/resources/assets/js/pages/manage/messenger.vue index 9ceaf8f6f..39fdedf02 100644 --- a/resources/assets/js/pages/manage/messenger.vue +++ b/resources/assets/js/pages/manage/messenger.vue @@ -50,8 +50,7 @@ }" :data-id="dialog.id" @click="openDialog(dialog.id)" - v-longpress="handleLongpress" - @contextmenu.prevent.stop="handleContextmenu($event, dialog)"> + v-longpress="handleLongpress">