539943419/miaoDirectory
1
0 Fork 0
Code Pull Requests Projects Releases 2 Activity

添加页面加入/删除/文件加入/删除动画

Browse Source
This commit is contained in:
539943419 committed 2024-08-13 21:04:51 +08:00
1 parent 27ce78597b
commit 3d1f83d0ff
7 files changed
+283 -157
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/App.vue
+140 -67
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { h, onMounted, reactive, ref, shallowRef } from 'vue';
import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui';
import { EyeOffOutline, EyeOutline, CloseOutline, CopyOutline, EllipsisVertical, QrCodeOutline } from '@vicons/ionicons5'
@@ -7,17 +8,18 @@ import VirtualPage from './class/VirtualPage';
import VirtualDirectory from './class/VirtualDirectory';
import MiaoMask from './components/miaoMask.vue';
import config from './config';
import useViretualPages from './hooks/useVirtualPages';
const {baseUrl} = config
const { baseUrl } = config
const showModal = ref<boolean>(false)
const modalData = shallowRef<{
component: any
props: any
component: any
props: any
}>()
const views = reactive<VirtualPage[]>([])
const views = useViretualPages()
const rootDirectory = new VirtualDirectory({
name: '根目录',
@@ -42,15 +44,15 @@ const deleteView = (index: number) => {
}
}
// 若存在两个以上标签页可见则除点击的标签页以外其他全部隐藏，若只有一个标签页可见则全部展示
// 这个逻辑以后再研究吧，平时感觉用不到
// 点击标题是隐藏其他标签或显示其他标签，还挺好用的
const handleClickTitle = (index: number) => {
let count = views.filter(v=>v.visible).length
let count = views.filter(v => v.visible).length
let op = !views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
let _index = 0
while(_index < views.length) {
if(_index !== index) {
views[_index].visible = count > 1 ? false : true
}else {
while (_index < views.length) {
if (_index !== index) {
views[_index].visible = op === 'hideOthers' ? false : true
} else {
views[_index].visible = true
}
_index += 1
@@ -69,15 +71,15 @@ function renderIcon(icon: any) {
const openMenuOption = [
{
label: '分享',
key: 'share',
icon: renderIcon(QrCodeOutline)
label: '分享',
key: 'share',
icon: renderIcon(QrCodeOutline)
}
]
const handleMenuSelect = (key: string) => {
console.log(key)
if(key === 'share') {
if (key === 'share') {
showModal.value = true
modalData.value = {
component: NQrCode,
@@ -96,52 +98,60 @@ onMounted(() => {
</script>
<template>
<div class="view">
<div class="view-controler">
<n-scrollbar x-scrollable>
<div class="tags-container">
<div class="tag" v-for="(view, index) of views" :key="view.uid">
<div class="tag-title" @click="handleClickTitle(index)">{{ view.title }}</div>
<div class="tag-point" :style="{ backgroundColor: view.color } "></div>
<div class="tag-control">
<n-icon class="tag-control-icon icon" @click="view.switchShow()">
<EyeOutline v-show="view.visible" class="icon-inner" />
<EyeOffOutline v-show="!view.visible" class="icon-inner" />
</n-icon>
<n-icon class="tag-control-icon icon" @click="createView(view.currentDirectory, index + 1)">
<CopyOutline />
</n-icon>
<n-icon class="tag-control-icon icon" @click="deleteView(index)">
<CloseOutline class="icon-inner" />
</n-icon>
</div>
</div>
</div>
</n-scrollbar>
<div class="view-controler-menu">
<div class="view-controler-menu-item">
<n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
<n-icon class="icon">
<EllipsisVertical class="icon-inner" />
</n-icon>
</n-dropdown>
</div>
</div>
</div>
<div class="view-container">
<div class="view-container-item" v-for="(view, index) of views" v-show="view.visible" :key="view.uid">
<miao-directory v-model:current-directory="view.currentDirectory" :color="view.color" :index="index" @exit="deleteView(index)"></miao-directory>
</div>
</div>
</div>
<MiaoMask v-model:show="showModal" @click="showModal = false" >
<div class="view">
<div class="view-controler">
<n-scrollbar x-scrollable>
<div class="tags-container">
<transition-group name="tab">
<div class="tab" v-for="(view, index) of views" :key="view.uid">
<div class="tab-title" @click="handleClickTitle(index)">{{ view.title }}</div>
<div class="tab-point" :style="{ backgroundColor: view.color }"></div>
<div class="tab-control">
<n-icon class="tag-control-icon icon" @click="view.switchShow()">
<EyeOutline v-show="view.visible" class="icon-inner" />
<EyeOffOutline v-show="!view.visible" class="icon-inner" />
</n-icon>
<n-icon class="tag-control-icon icon" @click="createView(view.currentDirectory, index + 1)">
<CopyOutline />
</n-icon>
<n-icon class="tag-control-icon icon" @click="deleteView(index)">
<CloseOutline class="icon-inner" />
</n-icon>
</div>
</div>
</transition-group>
</div>
</n-scrollbar>
<div class="view-controler-menu">
<div class="view-controler-menu-item">
<n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
<n-icon class="icon">
<EllipsisVertical class="icon-inner" />
</n-icon>
</n-dropdown>
</div>
</div>
</div>
<div class="view-container">
<transition-group name="page">
<div class="view-container-item" v-for="(view, index) of views" v-show="view.visible" :key="view.uid">
<miao-directory v-model:current-directory="view.currentDirectory" :color="view.color" :index="index"
@exit="deleteView(index)"></miao-directory>
</div>
</transition-group>
</div>
</div>
<!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
<MiaoMask v-model:show="showModal" @click="showModal = false">
<component :is="modalData?.component" v-bind="modalData?.props"></component>
</MiaoMask>
</template>
<style lang="scss" scoped>
$controler-height: 25px;
.view{
$tag-width: 170px;
.view {
position: relative;
height: 100%;
width: 100%;
@@ -157,37 +167,38 @@ $controler-height: 25px;
display: flex;
margin-left: 5px;
flex: 1;
// overflow-x: scroll;
.tag {
.tab {
position: relative;
width: 170px;
width: $tag-width;
margin: 0 5px;
// flex: 1;
display: flex;
border-radius: 5px 5px 0 0;
align-items: center;
.tag-title {
.tab-title {
margin-left: 4px;
// width: 70%;
user-select: none;
cursor: pointer;
}
.tag-point {
.tab-point {
height: 5px;
aspect-ratio: 1;
border-radius: 66px;
margin-left: 5px;
}
.tag-control {
.tab-control {
position: absolute;
right: 10px;
display: flex;
align-items: center;
.tag-control-icon:not(:last-child) {
.tab-control-icon:not(:last-child) {
margin-right: 5px;
}
}
@@ -208,6 +219,7 @@ $controler-height: 25px;
display: flex;
align-items: center;
padding: 0 5px;
.view-controler-menu-item {
height: 100%;
aspect-ratio: 1;
@@ -215,13 +227,14 @@ $controler-height: 25px;
justify-content: center;
align-items: center;
}
&::before {
content: '';
height: calc($controler-height*0.6);
width: 1px;
border-right: 1px solid black;
position: absolute;
left: 2px;
content: '';
height: calc($controler-height*0.6);
width: 1px;
border-right: 1px solid black;
position: absolute;
left: 2px;
}
}
@@ -249,28 +262,88 @@ $controler-height: 25px;
height: calc(100% - $controler-height);
overflow-y: overlay;
overflow-x: overlay;
.view-container-item {
flex: 1;
height: 100%;
}
&::-webkit-scrollbar {
position: absolute;
width: 4px;
}
// 滚动条轨道
&::-webkit-scrollbar-track {
// background: rgb(239, 239, 239);
border-radius: 2px;
}
// 小滑块
&::-webkit-scrollbar-thumb {
background: #e0e0e0;
// border-radius: 5px;
}
&::-webkit-scrollbar-thumb:hover {
background: #999999;
}
}
}
// transition动画相关
.view {
.view-controler {
.tags-container {
.tab-move,
.tab-enter-active {
transition: all 0.2s ease;
}
.tab-leave-active {
transition: none;
}
.tab-enter-from {
opacity: 0;
transform: translateY(-30px);
}
// .tab-leave-to {
// opacity: 0;
// transform: translateY(-80px) translateX(calc($tag-width + 10px));
// }
.tab-leave-active {
position: absolute;
}
}
}
.view-container {
.page-move,
.page-enter-active {
transition: all 0.2s ease;
}
.page-leave-active {
transition: none;
}
.page-enter-from {
opacity: 0;
// transform: translateY(-100px);
}
// .page-leave-to {
// opacity: 0;
// transform: translateY(-80px) translateX(calc($tag-width + 10px));
// }
.page-leave-active {
position: absolute;
}
}
}
</style>