fix drag handle

This commit is contained in:
jxxghp
2024-05-09 18:30:25 +08:00
parent d005252f13
commit d857acc58e
13 changed files with 58 additions and 12 deletions
+6 -1
View File
@@ -33,7 +33,12 @@ const props = defineProps({
<!-- 插件仪表板 -->
<VCard v-else-if="!isNullOrEmptyObject(props.config)">
<VCardItem>
<VCardTitle class="cursor-move">{{ props.config?.name }}</VCardTitle>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>
{{ props.config?.name }}
</VCardTitle>
</VCardItem>
<VCardItem>
<DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
+8
View File
@@ -221,6 +221,12 @@ function dragOrderEnd() {
saveDashboardConfig()
}
// 拖动排序开始
function dragOrderBegin() {
// 如果是移动端则取消
if (!display.mdAndUp.value) return false
}
onBeforeMount(async () => {
await loadDashboardConfig()
getDashboardPlugins()
@@ -232,6 +238,8 @@ onBeforeMount(async () => {
<draggable
v-model="dashboardConfigs"
@end="dragOrderEnd"
:move="dragOrderBegin"
handle=".cursor-move"
item-key="id"
tag="VRow"
:component-data="{ 'class': 'match-height' }"
+4 -1
View File
@@ -125,7 +125,10 @@ onUnmounted(() => {
<template>
<VCard>
<VCardItem>
<VCardTitle class="cursor-move">CPU</VCardTitle>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>CPU</VCardTitle>
</VCardItem>
<VCardText>
<VueApexCharts type="line" :options="chartOptions" :series="series" :height="150" />
@@ -55,7 +55,10 @@ onMounted(() => {
<template>
<VCard>
<VCardItem>
<VCardTitle class="cursor-move">媒体统计</VCardTitle>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>媒体统计</VCardTitle>
</VCardItem>
<VCardText>
+4 -1
View File
@@ -131,7 +131,10 @@ onUnmounted(() => {
<template>
<VCard>
<VCardItem>
<VCardTitle class="cursor-move">内存</VCardTitle>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>内存</VCardTitle>
</VCardItem>
<VCardText>
<VueApexCharts type="area" :options="chartOptions" :series="series" :height="150" />
+4 -1
View File
@@ -44,7 +44,10 @@ onUnmounted(() => {
<template>
<VCard>
<VCardItem>
<VCardTitle class="cursor-move">系统进程</VCardTitle>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>系统进程</VCardTitle>
</VCardItem>
<VTable item-key="fullName" class="table-rounded" hide-default-footer disable-sort>
<thead>
+4 -1
View File
@@ -40,7 +40,10 @@ onUnmounted(() => {
<template>
<VCard>
<VCardItem>
<VCardTitle class="cursor-move">后台任务</VCardTitle>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>后台任务</VCardTitle>
</VCardItem>
<VCardText>
+4 -1
View File
@@ -82,7 +82,10 @@ onUnmounted(() => {
<template>
<VCard>
<VCardItem>
<VCardTitle class="cursor-move">实时速率</VCardTitle>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>实时速率</VCardTitle>
</VCardItem>
<VCardText class="pt-4">
+4 -1
View File
@@ -41,7 +41,10 @@ onMounted(() => {
<template>
<VCard>
<VCardItem>
<VCardTitle class="cursor-move">存储空间</VCardTitle>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>存储空间</VCardTitle>
</VCardItem>
<VCardText>
<h5 class="text-2xl font-weight-medium text-primary">
@@ -112,7 +112,10 @@ onMounted(() => {
<template>
<VCard>
<VCardItem>
<VCardTitle class="cursor-move">最近入库</VCardTitle>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>最近入库</VCardTitle>
</VCardItem>
<VCardText>
+4 -1
View File
@@ -23,7 +23,10 @@ onMounted(() => {
<template>
<VCard>
<VCardItem>
<VCardTitle class="cursor-move">最近添加</VCardTitle>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle >最近添加</VCardTitle>
</VCardItem>
<div v-if="latestList.length > 0" class="grid gap-4 grid-media-card mx-3 mb-3" tabindex="0">
+4 -1
View File
@@ -23,7 +23,10 @@ onMounted(() => {
<template>
<VCard>
<VCardItem>
<VCardTitle class="cursor-move">我的媒体库</VCardTitle>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle >我的媒体库</VCardTitle>
</VCardItem>
<div v-if="libraryList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">
+4 -1
View File
@@ -23,7 +23,10 @@ onMounted(() => {
<template>
<VCard>
<VCardItem>
<VCardTitle class="cursor-move">继续观看</VCardTitle>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>继续观看</VCardTitle>
</VCardItem>
<div v-if="playingList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">