统一长按/右键指令

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.__longpressStart__
-        delete el.__longpressClick__;
+        delete el.__longpressClick__
-        delete el.__longpressCancel__;
+        delete el.__longpressCancel__
     }
 }
 

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">
                             <div class="project-h1">
                                 <em @click.stop="toggleOpenMenu(item.id)"></em>
                                 <div class="title">{{item.name}}</div>
@@ -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`,
+                    top: `${projectRect.top}px`,
-                    height: dialogRect.height + 'px',
+                    height: projectRect.height + 'px',
                 }
                 this.operateVisible = true;
             })

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(() => {

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')">
                                 <div class="file-check" :class="{'file-checked':selectIds.includes(item.id)}" @click.stop="dropFile(item, 'select')">
                                     <Checkbox :value="selectIds.includes(item.id)"/>
@@ -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) {

resources/assets/js/pages/manage/messenger.vue

@@ -50,8 +50,7 @@
                             }"
                             :data-id="dialog.id"
                             @click="openDialog(dialog.id)"
-                            v-longpress="handleLongpress"
+                            v-longpress="handleLongpress">
-                            @contextmenu.prevent.stop="handleContextmenu($event, dialog)">
                             <template v-if="dialog.type=='group'">
                                 <i v-if="dialog.group_type=='project'" class="taskfont icon-avatar project">&#xe6f9;</i>
                                 <i v-else-if="dialog.group_type=='task'" class="taskfont icon-avatar task">&#xe6f4;</i>
@@ -542,29 +541,16 @@ export default {
             })
         },
 
-        handleLongpress(touchEvent, el) {
+        handleLongpress(event, el) {
-            if (this.$isDesktop) {
-                return
-            }
             const dialogId = $A.getAttr(el, 'data-id')
             const dialogItem = this.dialogList.find(item => item.id == dialogId)
-            if (dialogItem) {
+            if (!dialogItem) {
-                this.handleOperateShow(touchEvent.touches[0], dialogItem)
-            }
-        },
-
-        handleContextmenu(event, dialog) {
-            if (!this.$isDesktop) {
                 return
             }
-            this.handleOperateShow(event, dialog);
-        },
-
-        handleOperateShow(event, dialog) {
             this.operateVisible = false;
-            this.operateItem = $A.isJson(dialog) ? dialog : {};
+            this.operateItem = $A.isJson(dialogItem) ? dialogItem : {};
             this.$nextTick(() => {
-                const dialogRect = this.$refs[`dialog_${dialog.id}`][0].getBoundingClientRect();
+                const dialogRect = el.getBoundingClientRect();
                 const wrapRect = this.$refs.dialogWrapper.getBoundingClientRect();
                 this.operateStyles = {
                     left: `${event.clientX - wrapRect.left}px`,