feat: 技能大赛评分页面支持左右拖动改变大小

src/modules/admin/contest/check/views/Detail.vue

 <script setup lang="ts">
 import Preview from '@/components/Preview.vue'
 import { getCheckView } from '../api'
+import { useStorage } from '@vueuse/core'
 
 const ScoreDialog = defineAsyncComponent(() => import('../components/ScoreDialog.vue'))
 
@@ -11,6 +12,10 @@ const props = defineProps<Props>()
 
 // 左侧
 const leftPanelVisible = $ref<boolean>(true)
+const leftPanelWidth = useStorage('leftPanelWidth', 400)
+const leftPanelWidthText = $computed(() => {
+  return `${leftPanelWidth.value}px`
+})
 
 let detail = $ref<any>()
 provide('detail', $$(detail))
@@ -30,18 +35,50 @@ watchEffect(() => {
 
 // 评分
 const dialogVisible = $ref(false)
+
+// 拖拽改变左侧宽度
+// 因为鼠标移动文档和iframe影响不能move
+let dragFlag = $ref(false)
+let bookKey = $ref(0)
+watchEffect(() => {
+  if (!dragFlag) {
+    bookKey = Date.now()
+  }
+})
+function dragControllerDiv() {
+  const dragDom = document.getElementById('panel-resize')
+  if (dragDom) {
+    dragDom.addEventListener('mousedown', e => {
+      e.preventDefault()
+      dragFlag = true
+      document.onmousemove = e => {
+        leftPanelWidth.value = e.clientX
+      }
+      document.onmouseup = () => {
+        document.onmousemove = null
+        document.onmouseup = null
+        dragFlag = false
+      }
+    })
+  }
+}
+onMounted(() => {
+  dragControllerDiv()
+})
 </script>
 
 <template>
-  <section class="lab" v-if="detail">
+  <section class="lab">
     <div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }">
       <div class="lab-left__inner">
         <el-tabs type="border-card">
           <el-tab-pane label="评分规则" lazy>
-            <Preview :url="file.url"></Preview>
+            <div class="pop" v-if="dragFlag"></div>
+            <Preview :url="file.url" :key="bookKey"></Preview>
           </el-tab-pane>
         </el-tabs>
       </div>
+      <div class="panel-resize" id="panel-resize"></div>
       <div class="panel-icon" @click="leftPanelVisible = !leftPanelVisible">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 86" aria-hidden="true" width="16" height="86">
           <g fill="none" fill-rule="evenodd">
@@ -58,7 +95,7 @@ const dialogVisible = $ref(false)
         </svg>
       </div>
     </div>
-    <div class="lab-right">
+    <div class="lab-right" v-if="detail">
       <AppCard>
         <el-row justify="space-between">
           <div class="info">
@@ -80,6 +117,7 @@ const dialogVisible = $ref(false)
         </el-row>
       </AppCard>
       <div class="lab-box">
+        <div class="pop" v-if="dragFlag"></div>
         <iframe :src="detail.competition_uri" frameborder="0" class="iframe" ref="iframeRef"></iframe>
       </div>
     </div>
@@ -94,7 +132,7 @@ const dialogVisible = $ref(false)
 }
 .lab-left {
   position: relative;
-  width: 400px;
+  width: v-bind(leftPanelWidthText);
   padding: 20px;
   background-color: #e1e4eb;
   border-radius: 6px;
@@ -103,6 +141,9 @@ const dialogVisible = $ref(false)
   &.is-hidden {
     width: 0;
     padding: 0;
+    .panel-resize {
+      display: none;
+    }
     .panel-icon {
       left: -20px;
       right: 0;
@@ -141,6 +182,16 @@ const dialogVisible = $ref(false)
     overflow-y: auto;
   }
 }
+
+.panel-resize {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 20px;
+  cursor: col-resize;
+  z-index: 100;
+}
 .panel-icon {
   position: absolute;
   top: 50%;
@@ -159,6 +210,7 @@ const dialogVisible = $ref(false)
   height: 100%;
 }
 .lab-box {
+  position: relative;
   flex: 1;
   width: 100%;
   margin-top: 20px;
@@ -178,4 +230,13 @@ const dialogVisible = $ref(false)
     margin-left: 40px;
   }
 }
+.pop {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999999;
+  opacity: 0;
+}
 </style>