zdg #162

Merged
zhengdegang merged 2 commits from zdg into main 2024-08-30 13:46:50 +08:00
4 changed files with 66 additions and 25 deletions

BIN
resources/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

View File

@ -2,17 +2,19 @@
<div class="warp" ref="btnRef" :style="isFold?'min-height:auto;':''"> <div class="warp" ref="btnRef" :style="isFold?'min-height:auto;':''">
<slot name="start"></slot> <slot name="start"></slot>
<!-- 工具按钮 --> <!-- 工具按钮 -->
<el-space direction="vertical" v-show="!isFold"> <transition name="el-zoom-in-bottom">
<template v-for="(item,index) in list"> <el-space direction="vertical" v-show="!isFold">
<slot :name="item.prop" :item="item" :index="index"> <template v-for="(item,index) in list">
<div class="c-btn flex flex-col items-center gap-2 p-2" @click.stop="clickHandel(item,$event)"> <slot :name="item.prop" :item="item" :index="index">
<i class="iconfont" :class="item.icon" :style="item.style" /> <div class="c-btn flex flex-col items-center gap-2 p-2" @click.stop="clickHandel(item,$event)">
<span>{{item.label||item.text||item.name}}</span> <i class="iconfont" :class="item.icon" :style="item.style" />
</div> <span>{{item.label||item.text||item.name}}</span>
</slot> </div>
</template> </slot>
<slot name="append"></slot> </template>
</el-space> <slot name="append"></slot>
</el-space>
</transition>
<slot name="end"> <slot name="end">
<span class="fold" @click="isFold=!isFold" :style="isFold?'margin: 5px;':''"> <span class="fold" @click="isFold=!isFold" :style="isFold?'margin: 5px;':''">
{{isFold?'<<<':'>>>'}} {{isFold?'<<<':'>>>'}}

View File

@ -36,6 +36,7 @@ class Drag {
const {cx, cy} = this.getMousePos(e) const {cx, cy} = this.getMousePos(e)
this.x = cx this.x = cx
this.y = cy this.y = cy
this.getCurPos() // 被拖拽元素初始坐标
// 手动-触发事件 v-drag-start // 手动-触发事件 v-drag-start
this.el.dispatchEvent(new CustomEvent('v-drag-start', {detail:{drag: this}})) this.el.dispatchEvent(new CustomEvent('v-drag-start', {detail:{drag: this}}))
} }
@ -85,12 +86,20 @@ class Drag {
} }
// 获取移动后坐标 // 获取移动后坐标
getPos(x, y) { getPos(x, y) {
const w = this.max.w - this.toRound(this.el.clientWidth) // 边界控制:图标元素
const h = this.max.h - this.toRound(this.el.clientHeight) // const w = this.max.w - this.toRound(this.el.clientWidth)
// const h = this.max.h - this.toRound(this.el.clientHeight)
// 边界控制:整个工具
const w = this.max.w - this.toRound(this.handle.clientWidth)
const h = this.max.h - this.toRound(this.handle.clientHeight)
x = x < 0 ? 0 : x > w ? w : x x = x < 0 ? 0 : x > w ? w : x
y = y < 0 ? 0 : y > h ? h : y y = y < 0 ? 0 : y > h ? h : y
return { x, y } return { x, y }
} }
getCurPos(dom) {
const pos = this[dom||'handle']?.getBoundingClientRect()
this.data = {left:this.toRound(pos.left), top:this.toRound(pos.top)}
}
// 小数转整数 // 小数转整数
toRound = v => Math.round(v) toRound = v => Math.round(v)
} }

View File

@ -20,17 +20,19 @@
<el-image :src="logo" draggable="false" /> <el-image :src="logo" draggable="false" />
</div> </div>
</div> </div>
<div class="tool-btns" v-show="!isFold"> <transition name="a-fade">
<el-segmented class="c-btns" v-model="tabActive" :options="btnList" size="large" block <div class="tool-btns" v-if="!isFold">
@change="tabChange"> <el-segmented class="c-btns" v-model="tabActive" :options="btnList" size="large" block
<template #default="{item}"> @change="tabChange">
<div class="c-btn flex flex-col items-center gap-2 p-2"> <template #default="{item}">
<i class="iconfont" :class="item.icon" :style="item.style" /> <div class="c-btn flex flex-col items-center gap-2 p-2">
<span>{{item.label}}</span> <i class="iconfont" :class="item.icon" :style="item.style" />
</div> <span>{{item.label}}</span>
</template> </div>
</el-segmented> </template>
</div> </el-segmented>
</div>
</transition>
</div> </div>
</div> </div>
</template> </template>
@ -41,7 +43,7 @@ import { onMounted, ref, reactive, watchEffect } from 'vue'
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus' import { ElMessageBox, ElMessage, ElLoading } from 'element-plus'
import * as classManageApi from '@/api/classManage' import * as classManageApi from '@/api/classManage'
import logo from '@root/resources/icon.png' // logo import logo from '@root/resources/logo.png' // logo
import boardVue from './components/board.vue' // - import boardVue from './components/board.vue' // -
import sideVue from './components/side.vue' // - import sideVue from './components/side.vue' // -
import upvoteVue from './components/upvote.vue' // - import upvoteVue from './components/upvote.vue' // -
@ -109,6 +111,23 @@ const tabChange = (val) => {
const logoHandle = (e,t) => { const logoHandle = (e,t) => {
if (Date.now() - dragtime.value < 200) { if (Date.now() - dragtime.value < 200) {
isFold.value = !isFold.value isFold.value = !isFold.value
setTimeout(() => {
// :
const dom = document.querySelector('.tool-bottom-all')
const { x } = dom.getBoundingClientRect()
const w = window.innerWidth - (470 || 80)
// if (x > w) dom.style.left = `${w}px`
if (x > w) { //
let left = x
const animatFn = () => {
left-=30
if (left < w) left == w
dom.style.left = `${left}px`
if (left > w) requestAnimationFrame(animatFn)
}
requestAnimationFrame(animatFn)
}
}, 20);
} }
} }
// -穿 // -穿
@ -262,4 +281,15 @@ watchEffect(() => {
} }
} }
} }
.a-fade-leave-active,.a-fade-enter-active{
transition: all .3s;
}
.a-fade-enter-from,.a-fade-leave-to{
width: 0;
opacity: 0;
}
.a-fade-enter-to,.a-fade-leave-from{
width: 350px;
opacity: 1;
}
</style> </style>