🐛 fix(action): 处理移动端按钮遮挡问题,现在打开操作按钮全靠意念

长按任意页面即可打开该页面操作按钮,隐藏同理
Teeoo · Dec 4, 2021 · ea8e138 · ea8e138
1 parent 4e6f306
commit ea8e138
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 24 deletions.
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -1,6 +1,6 @@
 <template>
-  <q-layout view='lHh Lpr lFf' v-touch-hold.mouse='handleMiniShell'>
-    <q-header elevated class='bg-purple' v-touch-swipe.mouse.right='handleMiniShell'>
+  <q-layout view='lHh Lpr lFf'>
+    <q-header elevated class='bg-purple' v-touch-hold.mouse='handleMiniShell' v-touch-swipe.mouse.right='handleMiniShell'>
       <q-toolbar>
         <q-btn flat round dense icon='menu' @click='toggleLeftDrawer' class='q-mr-sm' />
         <q-space></q-space>

diff --git a/src/pages/jsmanage.vue b/src/pages/jsmanage.vue
@@ -1,5 +1,6 @@
 <template>
-  <q-page>
+  <q-page
+    v-touch-hold.mouse='()=>handleSwipe=!handleSwipe'>
     <q-card flat>
       <q-card-section>
         <div class='row'>
@@ -136,7 +137,7 @@
         </q-card-section>
       </q-card>
     </q-dialog>
-    <q-page-sticky position='bottom-right' :offset='[18, 18]'>
+    <q-page-sticky v-show='handleSwipe' position='bottom-right' :offset='[18, 18]'>
       <q-fab
         v-model='draggingFab'
         color='purple'
@@ -192,7 +193,7 @@ export default defineComponent({
     const isOpenLog = ref(false);
     const downloadForm = ref(null);
     const draggingFab = ref(false);
-
+    const handleSwipe=ref(false)
 
     const message = ref<string[]>([]);
     const ws = inject('ws') as WebSocket;
@@ -369,7 +370,8 @@ export default defineComponent({
       isOpenLog,
       message,
       draggingFab,
-      validation
+      validation,
+      handleSwipe
     };
   }
 });

diff --git a/src/pages/mitm.vue b/src/pages/mitm.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-page>
+  <q-page v-touch-hold.mouse='()=>handleSwipe=!handleSwipe'>
     <q-table
       flat
       separator='none'
@@ -27,7 +27,7 @@
         </q-tr>
       </template>
     </q-table>
-    <q-page-sticky position='bottom-right' :offset='[18, 18]'>
+    <q-page-sticky v-show='handleSwipe' position='bottom-right' :offset='[18, 18]'>
       <q-fab
         v-model='draggingFab'
         color='purple'
@@ -124,6 +124,7 @@ export default defineComponent({
     const mitm = ref<Partial<Mitm>>({});
     const draggingFab = ref(false);
     const dialog = ref(false);
+    const handleSwipe = ref(false);
     const commonName = ref('elecV2P');
     const overwrite = ref(false);
 
@@ -264,7 +265,8 @@ export default defineComponent({
       overwrite,
       generate,
       tempcaches,
-      clear
+      clear,
+      handleSwipe
     };
   }
 });

diff --git a/src/pages/rewrite.vue b/src/pages/rewrite.vue
@@ -1,5 +1,7 @@
 <template>
-  <q-page>
+  <q-page
+    v-touch-hold.mouse='()=>handleSwipe=!handleSwipe'
+  >
     <q-table
       flat
       separator='none'
@@ -145,7 +147,7 @@
             </template>
           </q-table>
         </q-card-section>
-        <q-page-sticky position='bottom-right' :offset='[18, 18]'>
+        <q-page-sticky v-show='handleSwipe' position='bottom-right' :offset='[18, 18]'>
           <q-fab
             v-model='draggingFab'
             color='purple'
@@ -159,7 +161,7 @@
         </q-page-sticky>
       </q-card>
     </q-dialog>
-    <q-page-sticky position='bottom-right' :offset='[18, 18]'>
+    <q-page-sticky v-show='handleSwipe' position='bottom-right' :offset='[18, 18]'>
       <q-fab
         v-model='draggingFab'
         color='purple'
@@ -245,6 +247,7 @@ export default defineComponent({
     const maximizedToggle = ref(true);
     const pagination = ref({ sortBy: 'desc', descending: false, page: 1, rowsPerPage: 5 });
     const paginationSub = ref({ sortBy: 'desc', descending: false, page: 1, rowsPerPage: 5 });
+    const handleSwipe = ref(false);
     onMounted(async () => {
       try {
         const data: RewriteLists = await api.get('data?type=rewritelists');
@@ -361,7 +364,8 @@ export default defineComponent({
       dialog,
       maximizedToggle,
       delSubRes,
-      getContent
+      getContent,
+      handleSwipe
     };
   }
 });

diff --git a/src/pages/rules.vue b/src/pages/rules.vue
@@ -1,5 +1,7 @@
 <template>
-  <q-page>
+  <q-page
+    v-touch-hold.mouse='()=>handleSwipe=!handleSwipe'
+  >
     <q-table
       flat
       separator='none'
@@ -19,8 +21,8 @@
 
           <q-td key='ctype' :props='props'>
             <q-select color='pink' v-model='props.row.ctype' :options='ctype'
-                      option-value="val"
-                      option-label="label"
+                      option-value='val'
+                      option-label='label'
                       emit-value
                       map-options label='修改方式' />
           </q-td>
@@ -31,8 +33,8 @@
 
           <q-td key='stage' :props='props'>
             <q-select color='pink' v-model='props.row.stage' :options='stage'
-                      option-value="val"
-                      option-label="label"
+                      option-value='val'
+                      option-label='label'
                       emit-value
                       map-options
                       label='修改时间' />
@@ -51,7 +53,7 @@
         </q-tr>
       </template>
     </q-table>
-    <q-page-sticky position='bottom-right' :offset='[18, 18]'>
+    <q-page-sticky v-show='handleSwipe' position='bottom-right' :offset='[18, 18]'>
       <q-fab
         v-model='draggingFab'
         color='purple'
@@ -66,6 +68,7 @@
 </template>
 
 <script lang='ts'>
+
 import { defineComponent, onMounted, ref } from 'vue';
 import { api } from 'boot/axios';
 import { useQuasar } from 'quasar';
@@ -85,7 +88,7 @@ const ctype = [
   { label: '307 重定向', val: '307' },
   { label: '阻止', val: 'block' },
   { label: '$HOLD', val: 'hold' },
-  { label: 'User-Agent', val: 'ua' },
+  { label: 'User-Agent', val: 'ua' }
 ];
 const stage = [{ label: '网络请求前', val: 'req' }, { label: '数据返回前', val: 'res' }];
 
@@ -132,6 +135,7 @@ export default defineComponent({
     const rule = ref<Partial<Rules>>({});
     const header = ref(columns);
     const draggingFab = ref(false);
+    const handleSwipe = ref(false);
     const pagination = ref({ sortBy: 'desc', descending: false, page: 1, rowsPerPage: 5 });
     onMounted(async () => {
       try {
@@ -186,7 +190,7 @@ export default defineComponent({
     };
 
     return {
-      rule, header, mtype, ctype, stage, del, save, draggingFab, insert, pagination
+      rule, header, mtype, ctype, stage, del, save, draggingFab, insert, pagination, handleSwipe
     };
   }
 });

diff --git a/src/pages/task.vue b/src/pages/task.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-page>
+  <q-page v-touch-hold.mouse='()=>handleSwipe=!handleSwipe'>
     <q-table
       flat
       row-key='name'
@@ -203,7 +203,7 @@
         </q-card-section>
       </q-card>
     </q-dialog>
-    <q-page-sticky position='bottom-right' :offset='[18, 18]'>
+    <q-page-sticky v-show='handleSwipe' position='bottom-right' :offset='[18, 18]'>
       <q-fab
         v-model='draggingFab'
         color='purple'
@@ -311,6 +311,7 @@ export default defineComponent({
     const isOpenLog = ref(false);
     const dialog = ref(false);
     const maximizedToggle = ref(true);
+    const handleSwipe=ref(false)
     const pagination = ref({
       sortBy: 'desc',
       descending: false,
@@ -614,7 +615,8 @@ export default defineComponent({
       filterTask,
       addTask,
       taskSubList,
-      insert
+      insert,
+      handleSwipe
     };
   }
 });