我的实验,左侧拖拽

src/modules/student/contest/components/DiscussItem.vue

@@ -117,6 +117,7 @@ const commentVisible = $ref(false)
   align-items: center;
   justify-content: flex-end;
   margin-top: 10px;
+  padding-right: 15px;
   .button-comment {
     display: flex;
     align-items: center;

src/modules/student/lab/components/DiscussItem.vue

@@ -117,6 +117,7 @@ const commentVisible = $ref(false)
   align-items: center;
   justify-content: flex-end;
   margin-top: 10px;
+  padding-right: 15px;
   .button-comment {
     display: flex;
     align-items: center;

src/modules/student/lab/views/Index.vue

@@ -16,7 +16,7 @@ const ReportDialog = defineAsyncComponent(() => import('../components/ReportDial
 const route = useRoute()
 
 // 左侧
-const leftPanelVisible = $ref<boolean>(true)
+let leftPanelVisible = $ref<boolean>(true)
 const form = reactive<{ course_id: string; experiment_id: string }>({
   course_id: (route.query.course_id as string) || '',
   experiment_id: (route.query.experiment_id as string) || ''
@@ -115,6 +115,7 @@ function handleCaptureCallback(event: MessageEvent) {
 }
 onMounted(() => {
   window.addEventListener('message', handleCaptureCallback, false)
+  dragControllerDiv()
 })
 onUnmounted(() => {
   window.removeEventListener('message', handleCaptureCallback, false)
@@ -140,11 +141,40 @@ function handleSubmit() {
     }
   )
 }
+
+// 拖拽改变左侧宽度
+// 因为鼠标移动文档和iframe影响不能move
+const dragFlag = ref(true)
+function dragControllerDiv() {
+  const dragDom = document.getElementById('panel-icon')
+  const labLeftDom = document.getElementById('lab-left')
+  if (dragDom && labLeftDom) {
+    dragDom.onmousedown = function () {
+      // 判断不是拖拽是点击的话就折叠
+      let clickFlag = true
+      document.onmousemove = function (e) {
+        clickFlag = false
+        dragFlag.value = false
+        labLeftDom.style.width = `${e.x}px`
+      }
+      document.onmouseup = function () {
+        document.onmousemove = null
+        document.onmouseup = null
+        dragFlag.value = true
+        if (clickFlag) {
+          labLeftDom.style.width = '400px'
+          leftPanelVisible = !leftPanelVisible
+        }
+      }
+      return false
+    }
+  }
+}
 </script>
 
 <template>
   <section class="lab">
-    <div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }">
+    <div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }" id="lab-left">
       <div class="lab-left__inner">
         <el-form :model="form" label-suffix=":" hide-required-asterisk>
           <el-form-item label="请选择课程">
@@ -160,6 +190,7 @@ function handleSubmit() {
         </el-form>
         <el-tabs type="border-card" stretch>
           <el-tab-pane label="实训指导" lazy>
+            <div class="pop" v-if="!dragFlag"></div>
             <Book :course_id="form.course_id" :experiment_id="form.experiment_id"></Book>
           </el-tab-pane>
           <el-tab-pane label="操作视频" lazy>
@@ -173,7 +204,8 @@ function handleSubmit() {
           </el-tab-pane>
         </el-tabs>
       </div>
-      <div class="panel-icon" @click="leftPanelVisible = !leftPanelVisible">
+      <!-- @click="leftPanelVisible = !leftPanelVisible" -->
+      <div class="panel-icon" id="panel-icon">
         <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">
             <path
@@ -207,6 +239,7 @@ function handleSubmit() {
         </el-row>
       </AppCard>
       <div class="lab-box">
+        <div class="pop" v-if="!dragFlag"></div>
         <el-empty description="您已经提交该实验，不能再进行操作，切换其他实验再做操作吧。" v-if="submitted" />
         <iframe :src="LAB_URL" :key="iframeKey" frameborder="0" class="iframe" ref="iframeRef" v-else></iframe>
       </div>
@@ -235,7 +268,7 @@ function handleSubmit() {
   box-sizing: border-box;
   transition: all 0.1s;
   &.is-hidden {
-    width: 0;
+    width: 0 !important;
     padding: 0;
     .panel-icon {
       left: -20px;
@@ -293,6 +326,7 @@ function handleSubmit() {
   height: 100%;
 }
 .lab-box {
+  position: relative;
   flex: 1;
   width: 100%;
   margin-top: 20px;
@@ -301,4 +335,13 @@ function handleSubmit() {
   width: 100%;
   height: 100%;
 }
+.pop {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999999;
+  opacity: 0;
+}
 </style>