长按自定义指令

package.json

@@ -28,6 +28,7 @@
     "pptxgenjs": "^3.12.0",
     "v3-color-picker-teleport": "^1.0.9",
     "vant": "^4.1.2",
+    "vconsole": "^3.15.0",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },

src/directives/Index.js

@@ -1,6 +1,8 @@
 // 注册自定义指令
 import ScreenshotDirective from './Screenshot'
+import LongPress from './LongPress';
 
 export function RegisterDirective(app){
     app.directive('screenshot', ScreenshotDirective);
+    app.directive('longpress', LongPress);
 }

src/directives/LongPress.js

@@ -0,0 +1,49 @@
+// 长按指令
+//eg: v-longpress="{ handler: onLongPressItem, args: item, duration: 1000 }"
+
+const LongPressDirective = {
+  beforeMount(el, binding) {
+    let pressTimer = null;
+
+    // 长按开始
+    const start = (event) => {
+      if (event.type === 'click' && event.button !== 0) {
+        return;
+      }
+
+      if (pressTimer === null) {
+        pressTimer = setTimeout(() => {
+          binding.value.handler(binding.value.args);
+        }, binding.value.duration || 500); // 默认长按时间为500毫秒，可通过value.duration修改
+      }
+    };
+
+    // 长按结束
+    const cancel = () => {
+      if (pressTimer !== null) {
+        clearTimeout(pressTimer);
+        pressTimer = null;
+      }
+    };
+
+    el.addEventListener('mousedown', start);
+    el.addEventListener('touchstart', start);
+
+    el.addEventListener('click', cancel);
+    el.addEventListener('mouseout', cancel);
+    el.addEventListener('touchend', cancel);
+    el.addEventListener('touchcancel', cancel);
+  },
+
+  beforeUnmount(el) {
+    el.removeEventListener('mousedown', start);
+    el.removeEventListener('touchstart', start);
+
+    el.removeEventListener('click', cancel);
+    el.removeEventListener('mouseout', cancel);
+    el.removeEventListener('touchend', cancel);
+    el.removeEventListener('touchcancel', cancel);
+  }
+};
+
+export default LongPressDirective

src/main.js

@@ -8,6 +8,11 @@ import reportErr from '@/utils/reportErr'
 import '@vant/touch-emulator';
 import {RegisterDirective} from '@/directives/Index.js'
 import {setupStore} from '@/store'
+import VConsole from 'vconsole';
+
+if(import.meta.env.MODE==='test'){
+    const vConsole = new VConsole();
+}
 
 
 const app= createApp(App)

src/views/report/List.vue

@@ -6,7 +6,6 @@ import ListClassify from './components/ListClassify.vue'
 import ReportPublishPop from './components/ReportPublishPop.vue'
 import { showToast,showDialog,Dialog } from 'vant';
 import { useRouter } from 'vue-router';
-import { OnLongPress  } from '@vueuse/components'
 import { useWindowSize } from '@vueuse/core'
 import {useCachedViewsStore} from '@/store/modules/cachedViews'
 const cachedViewsStore=useCachedViewsStore()
@@ -348,16 +347,12 @@ async function goSearch(){
         >   
             <img v-if="listState.list.length==0&&listState.finished" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
             <ul class="list-wrap">
-                <OnLongPress
+                <li
                     v-for="item in listState.list" 
                     :key="item.Id"
-                    :options="{delay:1500}"
-                    @trigger="onLongPressItem(item)"
-                >
-                <li 
-                    class="item" 
-                    
+                    class="item"
                     @click="goDetail(item)"
+                    v-longpress="{ handler: onLongPressItem, args: item, duration: 1000 }"
                 >
                     <h2 :class="['van-ellipsis title',item.Title.startsWith('【')?'inline-title':'']">{{item.Title}}</h2>
                     <p class="van-multi-ellipsis--l2 des">{{item.Abstract}}</p>
@@ -372,7 +367,6 @@ async function goSearch(){
                         </div>
                     </div>
                 </li>
-                </OnLongPress>
             </ul>
         </van-list>
     </div>

src/views/reportEn/List.vue

@@ -5,7 +5,6 @@ import moment from 'moment'
 import ListClassify from './components/ListClassify.vue'
 import { showToast,showDialog,Dialog } from 'vant';
 import { useRouter } from 'vue-router';
-import { OnLongPress  } from '@vueuse/components'
 import { useWindowSize } from '@vueuse/core'
 import {useCachedViewsStore} from '@/store/modules/cachedViews'
 const cachedViewsStore=useCachedViewsStore()
@@ -313,15 +312,12 @@ function goSearch(){
         >   
             <img v-if="listState.list.length==0&&listState.finished" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
             <ul class="list-wrap">
-                <OnLongPress
+                <li 
                     v-for="item in listState.list" 
                     :key="item.Id"
-                    :options="{delay:1500}"
-                    @trigger="onLongPressItem(item)"
-                >
-                <li 
                     class="item" 
                     @click="goDetail(item)"
+                    v-longpress="{ handler: onLongPressItem, args: item, duration: 1000 }"
                 >
                     <h2 :class="['van-ellipsis title',item.Title.startsWith('【')?'inline-title':'']">{{item.Title}}</h2>
                     <p class="van-multi-ellipsis--l2 des">{{item.Abstract}}</p>
@@ -336,7 +332,6 @@ function goSearch(){
                         </div>
                     </div>
                 </li>
-                </OnLongPress>
             </ul>
         </van-list>
     </div>