Skip to content

S
saas-lab
提交 290576ab authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: 优化拖拽

上级 65ceaaab
隐藏空白字符变更
内嵌 并排
正在显示 包含 92 行增加 和 67 行删除
src/modules/student/contest/views/Lab.vue
浏览文件 @ 290576ab
......@@ -5,6 +5,7 @@ import { ElMessageBox, ElMessage } from 'element-plus'
import { upload } from '@/utils/upload'
import { getContest, getExperimentRecord, uploadExperimentPicture } from '../api'
import dayjs from 'dayjs'
import { useStorage } from '@vueuse/core'
const Book = defineAsyncComponent(() => import('../components/Book.vue'))
const Video = defineAsyncComponent(() => import('../components/Video.vue'))
......@@ -28,7 +29,11 @@ onMounted(() => {
})
// 左侧
let leftPanelVisible = $ref<boolean>(true)
const leftPanelVisible = $ref<boolean>(true)
const leftPanelWidth = useStorage('leftPanelWidth', 400)
const leftPanelWidthText = $computed(() => {
return `${leftPanelWidth.value}px`
})
let detail = $ref<ExperimentRecord>()
provide('detail', $$(detail))
......@@ -107,43 +112,41 @@ function uploadPicture(url: string) {
// 拖拽改变左侧宽度
// 因为鼠标移动文档和iframe影响不能move
const dragFlag = ref(true)
let dragFlag = $ref(false)
let bookKey = $ref(0)
watchEffect(() => {
if (!dragFlag) {
bookKey = Date.now()
}
})
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`
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 = function () {
document.onmouseup = () => {
document.onmousemove = null
document.onmouseup = null
dragFlag.value = true
if (clickFlag) {
labLeftDom.style.width = '400px'
leftPanelVisible = !leftPanelVisible
}
dragFlag = false
}
return false
}
})
}
}
</script>
<template>
<section class="lab">
<div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }" id="lab-left">
<div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }">
<div class="lab-left__inner">
<h1>{{ competition?.name }}</h1>
<el-tabs type="border-card" stretch>
<el-tabs type="border-card">
<el-tab-pane label="实训指导" lazy>
<div class="pop" v-if="!dragFlag"></div>
<Book :competition_id="id"></Book>
<div class="pop" v-if="dragFlag"></div>
<Book :competition_id="id" :key="bookKey"></Book>
</el-tab-pane>
<el-tab-pane label="操作视频" lazy>
<Video :competition_id="id"></Video>
......@@ -156,20 +159,19 @@ function dragControllerDiv() {
</el-tab-pane>
</el-tabs>
</div>
<div class="panel-icon" id="panel-icon">
<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">
<path
class="path-wapper"
d="M0 0l14.12 8.825A4 4 0 0116 12.217v61.566a4 4 0 01-1.88 3.392L0 86V0z"
fill="#e1e4eb"
></path>
fill="#e1e4eb"></path>
<path
class="path-arrow"
d="M10.758 48.766a.778.778 0 000-1.127L6.996 43l3.762-4.639a.778.778 0 000-1.127.85.85 0 00-1.172 0l-4.344 5.202a.78.78 0 000 1.128l4.344 5.202a.85.85 0 001.172 0z"
fill="#8D9EA7"
fill-rule="nonzero"
></path>
fill-rule="nonzero"></path>
</g>
</svg>
</div>
......@@ -184,14 +186,13 @@ function dragControllerDiv() {
</el-row>
</AppCard>
<div class="lab-box">
<div class="pop" v-if="!dragFlag"></div>
<div class="pop" v-if="dragFlag"></div>
<iframe
:src="competition?.train_platform_uri"
:key="iframeKey"
frameborder="0"
class="iframe"
ref="iframeRef"
></iframe>
ref="iframeRef"></iframe>
</div>
</div>
</section>
......@@ -204,7 +205,7 @@ function dragControllerDiv() {
}
.lab-left {
position: relative;
width: 400px;
width: v-bind(leftPanelWidthText);
padding: 20px;
background-color: #e1e4eb;
border-radius: 6px;
......@@ -213,6 +214,9 @@ function dragControllerDiv() {
&.is-hidden {
width: 0 !important;
padding: 0;
.panel-resize {
display: none;
}
.panel-icon {
left: -20px;
right: 0;
......@@ -254,6 +258,15 @@ function dragControllerDiv() {
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%;
......
src/modules/student/lab/views/Index.vue
浏览文件 @ 290576ab
......@@ -6,6 +6,7 @@ import { useGetCourseList } from '../composables/useGetCourseList'
import { upload } from '@/utils/upload'
import { getExperimentRecord, uploadExperimentPicture, submitExperimentRecord } from '../api'
import dayjs from 'dayjs'
import { useStorage } from '@vueuse/core'
const Book = defineAsyncComponent(() => import('../components/Book.vue'))
const Video = defineAsyncComponent(() => import('../components/Video.vue'))
......@@ -16,7 +17,11 @@ const ReportDialog = defineAsyncComponent(() => import('../components/ReportDial
const route = useRoute()
// 左侧
let leftPanelVisible = $ref<boolean>(true)
const leftPanelVisible = $ref<boolean>(true)
const leftPanelWidth = useStorage('leftPanelWidth', 400)
const leftPanelWidthText = $computed(() => {
return `${leftPanelWidth.value}px`
})
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) || ''
......@@ -144,37 +149,35 @@ function handleSubmit() {
// 拖拽改变左侧宽度
// 因为鼠标移动文档和iframe影响不能move
const dragFlag = ref(true)
let dragFlag = $ref(false)
let bookKey = $ref(0)
watchEffect(() => {
if (!dragFlag) {
bookKey = Date.now()
}
})
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`
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 = function () {
document.onmouseup = () => {
document.onmousemove = null
document.onmouseup = null
dragFlag.value = true
if (clickFlag) {
labLeftDom.style.width = '400px'
leftPanelVisible = !leftPanelVisible
}
dragFlag = false
}
return false
}
})
}
}
</script>
<template>
<section class="lab">
<div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }" id="lab-left">
<div class="lab-left" :class="{ 'is-hidden': !leftPanelVisible }">
<div class="lab-left__inner">
<el-form :model="form" label-suffix=":" hide-required-asterisk>
<el-form-item label="请选择课程">
......@@ -188,10 +191,10 @@ function dragControllerDiv() {
</el-select>
</el-form-item>
</el-form>
<el-tabs type="border-card" stretch>
<el-tabs type="border-card">
<el-tab-pane label="实训指导" lazy>
<div class="pop" v-if="!dragFlag"></div>
<Book :course_id="form.course_id" :experiment_id="form.experiment_id"></Book>
<div class="pop" v-if="dragFlag"></div>
<Book :course_id="form.course_id" :experiment_id="form.experiment_id" :key="bookKey"></Book>
</el-tab-pane>
<el-tab-pane label="操作视频" lazy>
<Video :course_id="form.course_id" :experiment_id="form.experiment_id"></Video>
......@@ -204,21 +207,19 @@ function dragControllerDiv() {
</el-tab-pane>
</el-tabs>
</div>
<!-- @click="leftPanelVisible = !leftPanelVisible" -->
<div class="panel-icon" id="panel-icon">
<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">
<path
class="path-wapper"
d="M0 0l14.12 8.825A4 4 0 0116 12.217v61.566a4 4 0 01-1.88 3.392L0 86V0z"
fill="#e1e4eb"
></path>
fill="#e1e4eb"></path>
<path
class="path-arrow"
d="M10.758 48.766a.778.778 0 000-1.127L6.996 43l3.762-4.639a.778.778 0 000-1.127.85.85 0 00-1.172 0l-4.344 5.202a.78.78 0 000 1.128l4.344 5.202a.85.85 0 001.172 0z"
fill="#8D9EA7"
fill-rule="nonzero"
></path>
fill-rule="nonzero"></path>
</g>
</svg>
</div>
......@@ -239,7 +240,7 @@ function dragControllerDiv() {
</el-row>
</AppCard>
<div class="lab-box">
<div class="pop" v-if="!dragFlag"></div>
<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>
......@@ -250,8 +251,7 @@ function dragControllerDiv() {
v-model="reportDialogVisible"
:experiment_id="form.experiment_id"
@update="fetchInfo"
v-if="reportDialogVisible && form.experiment_id"
></ReportDialog>
v-if="reportDialogVisible && form.experiment_id"></ReportDialog>
</template>
<style lang="scss" scoped>
......@@ -261,7 +261,7 @@ function dragControllerDiv() {
}
.lab-left {
position: relative;
width: 400px;
width: v-bind(leftPanelWidthText);
padding: 20px;
background-color: #e1e4eb;
border-radius: 6px;
......@@ -270,6 +270,9 @@ function dragControllerDiv() {
&.is-hidden {
width: 0 !important;
padding: 0;
.panel-resize {
display: none;
}
.panel-icon {
left: -20px;
right: 0;
......@@ -308,6 +311,15 @@ function dragControllerDiv() {
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%;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论