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

添加miaoContextMenu用于自定义右键菜单

Browse Source
This commit is contained in:
539943419 committed 2024-08-15 22:05:51 +08:00
1 parent ed364f6343
commit 60477a9112
8 files changed
+239 -113
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/App.vue
+10 -4
View File
@@ -42,14 +42,18 @@ const rootDirectory = reactive(
// component就是一个vue组件，类似于miaoDirectory
const createView = (
component: any,
currentObjects: (VirtualDirectory | VirtualFile)[],
currentDirectorys?: VirtualDirectory[],
currentFiles?: VirtualFile[],
index?: number
) => {
index ?? (index = views.length)
views.splice(
index,
0,
reactive<VirtualPage>(new VirtualPage(component, [...currentObjects]))
reactive<VirtualPage>(new VirtualPage(component, {
directorys: [...(currentDirectorys ?? [])],
files: [...(currentFiles ?? [])]
}))
)
}
@@ -145,7 +149,8 @@ onMounted(() => {
@click="
createView(
view.component,
view.currentObjects,
view.currentDirectorys,
view.currentFiles,
index + 1
)
">
@@ -183,7 +188,7 @@ onMounted(() => {
:key="view.uid">
<component
:is="view.component"
v-model:current-objects="view.currentObjects"
v-model:current-objects="view.currentDirectorys"
:id="view.uid"
:color="view.color"
@exit="deleteView(index)"></component>
@@ -194,6 +199,7 @@ onMounted(() => {
<!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
<MiaoMask v-model:show="showModal" @click="showModal = false">
<component
@click="(e:any) => e.stopPropagation()"
:is="modalData?.component"
v-bind="modalData?.props"></component>
</MiaoMask>
src/class/VirtualDirectory.ts
+2 -2
View File
@@ -80,11 +80,11 @@ class VirtualDirectory {
* @param {number} layer 需要跳转的层数
* @returns {VirtualDirectory}
*/
getParent(layer: number): VirtualDirectory {
getParents(layer: number): VirtualDirectory {
if (layer <= 0 || !this.parent) {
return this;
}
return this.parent.getParent(layer - 1);
return this.parent.getParents(layer - 1);
}
updateContent(content: (file | directory)[]) {
src/class/VirtualPage.ts
+9 -6
View File
@@ -13,20 +13,23 @@ const getRandomWebSafeColor = (() => {
})();
export default class VirtualPage {
constructor(component: any, initObjects: (VirtualDirectory | VirtualFile)[]) {
constructor(component: any, initObjects?:{ directorys?: VirtualDirectory[], files?: VirtualFile[]}) {
this.component = shallowRef(component);
this.currentObjects = initObjects;
this.currentDirectorys = initObjects?.directorys ?? [];
this.currentFiles = initObjects?.files ?? [];
this.visible = true;
this.uid = generateId();
this.refreshKey = Math.random();
this.color = getRandomWebSafeColor();
}
// 页面使用的组件
component: any;
// 是否可见
visible: boolean;
// 当前正在使用的文件或是文件夹
currentObjects: (VirtualDirectory | VirtualFile)[];
// 当前正在使用的文件夹
currentDirectorys: VirtualDirectory[];
// 当前正在使用的文件
currentFiles: VirtualFile[];
// 区分每一个页面的唯一id
uid: number;
// 当refreshKey改变时需要刷新页面，目前还没接入刷新
@@ -40,7 +43,7 @@ export default class VirtualPage {
if (this._title) {
return this._title;
}
return this.currentObjects[0].name;
return this.currentDirectorys[0].name;
}
setTitle(title: string) {
src/components/miaoContextMenu.vue
+88
View File
@@ -0,0 +1,88 @@
<!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
<!-- 支持长按和右键呼出下拉菜单 -->
<template>
<div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave" @touchstart="handleTouchStart"
@touchend="handleTouchEnd">
<slot></slot>
</div>
<n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options"
:show="showContextMenu > 0" :on-clickoutside="onClickoutside" @select="handleSelect" @mouseleave="
showContextMenu -= 1" @mouseenter="showContextMenu += 1" />
</template>
<script setup lang="ts">
import { NDropdown } from 'naive-ui/es/dropdown';
import { DropdownOption } from 'naive-ui/es/dropdown';
import { nextTick, ref } from 'vue';
const props = defineProps<{
options: DropdownOption[]
// 长按呼出右键菜单的时延，undefined时不生效
touchTimeOut?: number
}>()
const emit = defineEmits<{
select: [key: string]
}>()
const x = ref(0)
const y = ref(0)
const showContextMenu = ref(0)
// 长按计时器
let timer_touch: string | number | NodeJS.Timeout | undefined
const onClickoutside = async () => {
showContextMenu.value = 0
}
const handleMainMouseLeave = async () => {
// setTimeout(() => {
// showContextMenu.value -= 1
// }, 200)
nextTick(()=>{
showContextMenu.value -= 1
})
}
const handleSelect = async (key: string) => {
emit('select', key)
}
const handleContextMenu = (e: MouseEvent) => {
e.preventDefault()
showContextMenu.value = 0
nextTick().then(() => {
showContextMenu.value += 1
x.value = e.clientX
y.value = e.clientY
})
}
const handleTouchStart = (e: TouchEvent) => {
if(props.touchTimeOut === undefined) {
return
}
timer_touch ?? clearTimeout(timer_touch)
timer_touch = setTimeout(() => {
showContextMenu.value = 1
x.value = e.targetTouches[0].clientX
y.value = e.targetTouches[0].clientY
}, props.touchTimeOut)
}
const handleTouchEnd = () => {
if(timer_touch) {
clearTimeout(timer_touch)
timer_touch = undefined
}
}
</script>
<style>
.main {
width: 100%;
height: 100%;
position: relative;
}
</style>
src/components/miaoDirectory/miaoDirectoryItem.vue
+21 -22
View File
@@ -1,13 +1,8 @@
<template>
<div
class="miao-item"
draggable="true"
ref="itemRef"
@dragstart="handleDragStart">
<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
<miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
<div class="item-main">
<div
class="item-main-front"
:style="{ backgroundColor: props.color }"></div>
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
<Icon class="item-main-icon"></Icon>
<div class="item-main-info">
<div class="item-main-info-name">
@@ -17,22 +12,20 @@
{{ time }}
</div>
</div>
<n-dropdown
trigger="click"
:options="dropDownOptions"
@select="handleDropdownSelect">
<div
class="item-main-option"
@click="(e) => e.stopPropagation()">
<!-- 菜单现在通过右键/长按呼出 -->
<!-- <n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
<div class="item-main-option" @click="(e) => e.stopPropagation()">
<EllipsisVertical class="item-main-option-icon" />
</div>
</n-dropdown>
</n-dropdown> -->
</div>
</miaoContextMenu>
</div>
</template>
<script setup lang="ts">
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import miaoContextMenu from '../miaoContextMenu.vue'
import {
DocumentText,
FileTray,
@@ -43,15 +36,10 @@ import {
LogoJavascript,
LogoVue,
PlayCircle,
EllipsisVertical,
Disc
} from '@vicons/ionicons5'
import { computed, ref } from 'vue'
import dateFormatter from '@/hooks/dateFormatter'
// import useDataBus from '@/hooks/useDataBus'
import { NDropdown } from 'naive-ui'
// const dataBus = useDataBus()
const props = defineProps<{
item: VirtualDirectory | VirtualFile
@@ -96,7 +84,7 @@ const dropDownOptions = computed(() => {
return options
})
const handleDropdownSelect = (key: 'download' | 'delete') => {
const handleDropdownSelect = (key: string) => {
if (key === 'download') {
emit('download')
} else if (key === 'delete') {
@@ -179,6 +167,7 @@ const handleDragStart = (event: DragEvent) => {
justify-content: center;
align-items: center;
margin: 10px 10px;
.item-main {
position: relative;
width: 100%;
@@ -188,30 +177,36 @@ const handleDragStart = (event: DragEvent) => {
display: flex;
align-items: center;
transition: background-color 0.3s;
.item-main-front {
height: 100%;
width: 10px;
border-radius: 7px 0 0 7px;
background-color: rgb(0, 0, 0);
}
.item-main-icon {
margin-left: 10px;
height: 80%;
color: #00403e;
}
.item-main-info {
margin-left: 10px;
height: 100%;
display: flex;
flex-direction: column;
&-name {
user-select: none;
}
&-date {
user-select: none;
font-size: small;
}
}
.item-main-option {
height: 100%;
width: 20px;
@@ -225,18 +220,22 @@ const handleDragStart = (event: DragEvent) => {
align-items: center;
transition: background-color 0.3s;
.item-main-option-icon {
color: #000;
transition: color 0.15s;
}
&:hover,
&:active {
background-color: #8b8b8b;
.item-main-option-icon {
color: #fff;
}
}
}
&:hover,
&:active {
background-color: #d2d2d2;
src/components/miaoMask.vue
+8 -3
View File
@@ -1,9 +1,7 @@
<template>
<transition name="transition">
<div class="mask-body" ref="maskBodyRef" v-show="showMask">
<div @click="e=>e.stopPropagation()">
<slot></slot>
</div>
</div>
</transition>
</template>
@@ -20,24 +18,31 @@ const showMask = defineModel<boolean | number>('show', { default: false, require
height: 100%;
width: 100%;
position: absolute;
top:0;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
z-index: 7058214053994319;
// &-container {
// }
&-show {
display: flex;
transition: opacity 0.3s 0.01s;
opacity: 1;
}
&-hide {
opacity: 0;
transition: display 0.01s 0.3s;
display: none;
}
}
.transition-enter-active,
.transition-leave-active {
transition: opacity 0.3s ease;
src/components/miaoPopupInput.vue
+57 -21
View File
@@ -1,43 +1,79 @@
<template>
<miao-mask v-model:show="showMask">
<n-card title="">
<n-input v-model:value="inputValue" type="text" placeholder="基本的 Input" />
<n-button @click="_resolve && _resolve(inputValue)">确认</n-button>
<n-card class="popup-card" :title="popupConfig?.title" size="medium">
{{ popupConfig?.content }}
<n-input class="popup-input" v-model:value="inputValue" type="text" v-bind="popupConfig?.inputProps"
v-if="popupConfig?.inputProps" />
<div class="popup-button-container">
<n-button class="popup-button-container-button" v-for="option in popupConfig?.options" :key="option.label"
:type="option.type" @click="_resolve && _resolve(option.key)">{{ option.label }}</n-button>
</div>
</n-card>
</miao-mask>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ref, nextTick } from "vue";
import { NCard, NInput, NButton } from "naive-ui";
import miaoMask from "./miaoMask.vue";
import { InputProps } from "naive-ui";
const showMask = ref(true);
const showMask = ref(false);
const inputValue = ref<string>("");
const _resolve = ref<(text: string) => void>()
const _resolve = ref()
type popupConfig = {
type popupConfigType = {
title: string
placeholder: string
content?: string
inputProps?: InputProps
options: {
label
}
label: string
key: unknown
type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
}[]
}
const _config = reactive<popupConfig>({
title: '',
placeholder: ''
})
const popupConfig = ref<popupConfigType>()
const popup = () => {
const popup = async (config: popupConfigType) => {
popupConfig.value = config
showMask.value = true
return new Promise((resolve: (text: string) => void) => { _resolve.value = resolve }).then((text: string) => {
showMask.value = false
return text;
});
const key = await new Promise((resolve: (key: unknown) => unknown) => {
_resolve.value = resolve
})
const text = inputValue.value
showMask.value = false;
nextTick(() => {
inputValue.value = ''
_resolve.value = undefined
})
return {
text,
key
};
};
defineExpose({ popup });
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.popup-card {
width: 80%;
.popup-input {
margin-bottom: 10px;
}
.popup-button-container {
height: 100%;
width: 100%;
display: flex;
justify-content: flex-end;
.popup-button-container-button {
&:not(:last-child) {
margin-right: 5px;
}
}
}
}
</style>
src/views/miaoDirectory.vue
+44 -55
View File
@@ -1,15 +1,11 @@
<template>
<miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles">
<div class="miao-directory-item-container" ref="rootDomRef">
<div
class="container-top"
:style="{
<div class="container-top" :style="{
backgroundColor:
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
}">
<div
class="container-top-colorfulBar"
:style="{ backgroundColor: props.color }"></div>
<div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
<div class="container-top-breadcrumb">
<!-- <n-scrollbar x-scrollable> -->
<div class="container-top-breadcrumb-container">
@@ -19,10 +15,8 @@
<CloudOutline />
</n-icon>
</n-breadcrumb-item>
<n-breadcrumb-item
v-for="dir in currentDirectory?.directoryArray"
@click="setCurrentDirectory(dir)"
:clickable="true">
<n-breadcrumb-item v-for="dir in currentDirectory?.directoryArray"
@click="setCurrentDirectory(dir)" :clickable="true">
<div>{{ dir.name }}</div>
</n-breadcrumb-item>
</n-breadcrumb>
@@ -30,69 +24,44 @@
<!-- </n-scrollbar> -->
</div>
<div class="container-top-tools">
<n-icon
class="container-top-tools-item"
size="15"
@click="handleBack">
<n-icon class="container-top-tools-item" size="15" @click="handleBack">
<ChevronBackOutline />
</n-icon>
<n-icon
class="container-top-tools-item"
size="14"
@click="handleReload">
<ReloadOutline
class="container-top-tools-item-reload" />
<n-icon class="container-top-tools-item" size="14" @click="handleReload">
<ReloadOutline class="container-top-tools-item-reload" />
</n-icon>
<n-icon
class="container-top-tools-item"
size="20"
@click="emit('exit')">
<n-icon class="container-top-tools-item" size="20" @click="emit('exit')">
<CloseOutline />
</n-icon>
</div>
</div>
<div
class="container-items"
:style="{
<div class="container-items" :style="{
backgroundColor:
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
}">
<n-scrollbar>
<transition-group name="dirItem">
<miaoDirectoryItem
v-for="dir in showData_directory"
@click="setCurrentDirectory(dir)"
:item="dir"
:key="dir.uid"
:color="props.color"
@delete="handleItemDelete(dir)"
<miaoDirectoryItem v-for="dir in showData_directory" @click="setCurrentDirectory(dir)"
:item="dir" :key="dir.uid" :color="props.color" @delete="handleItemDelete(dir)"
@drag-start="handleItemDragStart" />
</transition-group>
<transition-group name="dirItem">
<miaoDirectoryItem
v-for="file in showData_files"
:item="file"
:key="file.uid"
@click="openUrl(`${baseUrl}${api.get}${file.path}`)"
@download="
<miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
@click="openUrl(`${baseUrl}${api.get}${file.path}`)" @download="
openUrl(`${baseUrl}${api.get}${file.path}`, {
download: file.name
})
"
@delete="handleItemDelete(file)"
@drag-start="handleItemDragStart"
" @delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
:color="props.color" />
</transition-group>
</n-scrollbar>
</div>
<div
class="container-bottom"
:style="{
<div class="container-bottom" :style="{
backgroundColor:
index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
}"></div>
<miao-mask v-model:show="showModel"></miao-mask>
<!-- <miao-popup-input ref="popupInput"></miao-popup-input> -->
<miao-popup-input ref="popupInput"></miao-popup-input>
</div>
</miao-drop-handler>
</template>
@@ -105,7 +74,7 @@ import { computed, onMounted, ref } from 'vue'
import Config from '@/config'
import miaoMask from '@/components/miaoMask.vue'
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
// import miaoPopupInput from "@/components/miaoPopupInput.vue";
import miaoPopupInput from "@/components/miaoPopupInput.vue";
import miaoDropHandler from '@/components/miaoDropHandler.vue'
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
import useDataBus from '@/hooks/useDataBus'
@@ -146,6 +115,7 @@ const currentDirectory = computed(() => {
return currentObjects.value[0]
})
// 当前组件在views中的序号
const index = computed(() => {
for (let i in views) {
if (views[i].uid === props.id) {
@@ -186,7 +156,7 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
)
virtualDirectory.updateContent(data)
} else {
;(async () => {
; (async () => {
const data: (file | directory)[] = await miaoFetchApi.get(
virtualDirectory
)
@@ -249,10 +219,6 @@ const handleItemDragStart = async (
}
}
const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
setCurrentDirectory(vDirs[0])
}
const handleDropFiles = async (files: File[]) => {
currentDirectory.value &&
uploadQueue.push(files, currentDirectory.value, {
@@ -262,6 +228,30 @@ const handleDropFiles = async (files: File[]) => {
})
}
const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
if (vDirs[0].parent === currentDirectory.value) {
return
}
const popupRes = await popupInput.value.popup({
title: '重命名',
showInput: true,
inputProps: {
placeholder: '',
},
options: [{
label: '取消',
key: false,
type: 'error'
}, {
label: '确认',
key: true,
type: 'success'
},]
})
console.log({ popupRes })
// setCurrentDirectory(vDirs[0])
}
onMounted(async () => {
await setCurrentDirectory(currentDirectory.value)
})
@@ -404,5 +394,4 @@ $bottom-bar-height: 60px;
// position: absolute;
// }
// }
// }
</style>
// }</style>