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

View File

@ -36,6 +36,7 @@ class Drag {
const {cx, cy} = this.getMousePos(e)
this.x = cx
this.y = cy
this.getCurPos() // 被拖拽元素初始坐标
// 手动-触发事件 v-drag-start
this.el.dispatchEvent(new CustomEvent('v-drag-start', {detail:{drag: this}}))
}
@ -85,12 +86,20 @@ class Drag {
}
// 获取移动后坐标
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
y = y < 0 ? 0 : y > h ? h : 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)
}

View File

@ -20,17 +20,19 @@
<el-image :src="logo" draggable="false" />
</div>
</div>
<div class="tool-btns" v-show="!isFold">
<el-segmented class="c-btns" v-model="tabActive" :options="btnList" size="large" block
@change="tabChange">
<template #default="{item}">
<div class="c-btn flex flex-col items-center gap-2 p-2">
<i class="iconfont" :class="item.icon" :style="item.style" />
<span>{{item.label}}</span>
</div>
</template>
</el-segmented>
</div>
<transition name="a-fade">
<div class="tool-btns" v-if="!isFold">
<el-segmented class="c-btns" v-model="tabActive" :options="btnList" size="large" block
@change="tabChange">
<template #default="{item}">
<div class="c-btn flex flex-col items-center gap-2 p-2">
<i class="iconfont" :class="item.icon" :style="item.style" />
<span>{{item.label}}</span>
</div>
</template>
</el-segmented>
</div>
</transition>
</div>
</div>
</template>
@ -41,7 +43,7 @@ import { onMounted, ref, reactive, watchEffect } from 'vue'
import { useRoute } from 'vue-router';
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus'
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 sideVue from './components/side.vue' // -
import upvoteVue from './components/upvote.vue' // -
@ -109,6 +111,23 @@ const tabChange = (val) => {
const logoHandle = (e,t) => {
if (Date.now() - dragtime.value < 200) {
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>