全屏功能

src/web_preview/index.vue

@@ -99,8 +99,8 @@
         <aside v-if="!sidebarShow" class="sidebar-bar">
           <aside class="toolbar">
             <div class="toolbar-special">
-              <!-- <img :src="require('@/assets/icon/sidebar-fullscreen.png')" alt="全屏" />
-              <img :src="require('@/assets/icon/sidebar-toolkit.png')" alt="工具箱" /> -->
+              <img :src="require('@/assets/icon/sidebar-fullscreen.png')" alt="全屏" @click="fullScreen" />
+              <img :src="require('@/assets/icon/sidebar-toolkit.png')" alt="工具箱" />
               <img :src="require(`@/assets/icon/arrow-down.png`)" alt="伸缩" @click="toggleSidebarShow" />
             </div>
           </aside>
@@ -115,8 +115,8 @@
       <aside v-if="sidebarShow" ref="sidebarMenu" class="sidebar">
         <aside class="toolbar">
           <div class="toolbar-special">
-            <!-- <img :src="require('@/assets/icon/sidebar-fullscreen.png')" alt="全屏" />
-            <img :src="require('@/assets/icon/sidebar-toolkit.png')" alt="工具箱" /> -->
+            <img :src="require('@/assets/icon/sidebar-fullscreen.png')" alt="全屏" @click="fullScreen" />
+            <img :src="require('@/assets/icon/sidebar-toolkit.png')" alt="工具箱" />
           </div>
           <div v-if="sidebarShow" class="toolbar-list">
             <div
@@ -212,11 +212,7 @@
                         <el-image v-if="shouldShowItem(chapter, item)" :src="item.file_url" fit="contain" />
                         <div class="mark">
                           <span class="word">{{ item.file_name }}</span>
-                          <el-link
-                            type="primary"
-                            class="el-icon-place linkLocation"
-                            @click="handleLocation(item, 3)"
-                          ></el-link>
+                          <el-link type="primary" class="el-icon-place linkLocation" @click="handleLocation(item, 3)" />
                         </div>
                       </template>
                       <template v-else-if="parseInt(drawerType) === 1">
@@ -230,11 +226,7 @@
                         />
                         <div class="mark">
                           <span class="word"></span>
-                          <el-link
-                            type="primary"
-                            class="el-icon-place linkLocation"
-                            @click="handleLocation(item, 3)"
-                          ></el-link>
+                          <el-link type="primary" class="el-icon-place linkLocation" @click="handleLocation(item, 3)" />
                         </div>
                       </template>
                       <template v-else-if="parseInt(drawerType) === 2">
@@ -246,11 +238,7 @@
                         />
                         <div class="mark">
                           <span class="word">{{ item.file_name }}</span>
-                          <el-link
-                            type="primary"
-                            class="el-icon-place linkLocation"
-                            @click="handleLocation(item, 3)"
-                          ></el-link>
+                          <el-link type="primary" class="el-icon-place linkLocation" @click="handleLocation(item, 3)" />
                         </div>
                       </template>
                     </li>
@@ -370,6 +358,7 @@ import {
   SearchBookContentText,
 } from '@/api/book';
 import { getLocalStore } from '@/utils/auth';
+import { toggleFullScreen } from '@/utils/common';
 
 export default {
   name: 'CommonPreview',
@@ -409,8 +398,8 @@ export default {
       },
       { icon: 'collect', title: '收藏', handle: 'getCollect', param: { type: '3' } },
       { icon: 'note', title: '笔记', handle: 'getNote', param: { type: '4' } },
-      //{ icon: 'translate', title: '翻译', handle: '', param: {} },
-      //{ icon: 'setting', title: '设置', handle: '', param: {} },
+      // { icon: 'translate', title: '翻译', handle: '', param: {} },
+      // { icon: 'setting', title: '设置', handle: '', param: {} },
     ];
 
     const book_id = getLocalStore('book_id') || '';
@@ -722,7 +711,7 @@ export default {
         this[handle](param);
       }
 
-      if (barLevel == 2) {
+      if (barLevel === 2) {
         this.twoCurToolbarIcon = icon;
       } else {
         this.curToolbarIcon = icon;
@@ -798,7 +787,7 @@ export default {
       this.drawerType = type;
       this.$nextTick(() => {
         // 确保DOM更新后触发加载
-        //this.loadMore();
+        // this.loadMore();
         this.loadBookChapterStructExpandList();
       });
     },
@@ -857,7 +846,7 @@ export default {
         this.multimediaLoadingStates = true;
         if (!item.data && !item.error) {
           await this.loadmultimediaList();
-          var tmpList = this.file_list && this.file_list.length > 0 ? [...this.file_list] : null;
+          let tmpList = this.file_list && this.file_list.length > 0 ? [...this.file_list] : null;
           this.$set(item, 'data', tmpList);
           this.multimediaLoadingStates = false;
         } else {
@@ -1188,6 +1177,9 @@ export default {
         }
       });
     },
+    fullScreen() {
+      toggleFullScreen(this.$refs.previewMain);
+    },
   },
 };
 </script>