Explorar el Código

chore: about EmptyPlaceholder using

nian hace 2 meses
padre
commit
16f1800985
Se han modificado 2 ficheros con 42 adiciones y 48 borrados
  1. 15 18
      src/layout/index.vue
  2. 27 30
      src/views/drag-drop/index.vue

+ 15 - 18
src/layout/index.vue

@@ -66,25 +66,22 @@ const { scrollbarInMainLayout } = useComponentThemeOverrides()
               <span class="iconify ph--rectangle" />
             </div>
           </template>
-
-          <template #content>
-            <Transition
-              enter-active-class="transition-[grid-template-rows] duration-300 ease-naive-bezier"
-              leave-active-class="transition-[grid-template-rows] duration-300 ease-naive-bezier"
-              enter-from-class="grid-rows-[0fr]"
-              leave-to-class="grid-rows-[0fr]"
-              enter-to-class="grid-rows-[1fr]"
-              leave-from-class="grid-rows-[1fr]"
-            >
-              <div
-                v-if="preferencesStore.preferences.showFooter"
-                class="grid shrink-0 items-baseline overflow-hidden"
-              >
-                <FooterLayout />
-              </div>
-            </Transition>
-          </template>
         </EmptyPlaceholder>
+        <Transition
+          enter-active-class="transition-[grid-template-rows] duration-300 ease-naive-bezier"
+          leave-active-class="transition-[grid-template-rows] duration-300 ease-naive-bezier"
+          enter-from-class="grid-rows-[0fr]"
+          leave-to-class="grid-rows-[0fr]"
+          enter-to-class="grid-rows-[1fr]"
+          leave-from-class="grid-rows-[1fr]"
+        >
+          <div
+            v-if="preferencesStore.preferences.showFooter"
+            class="grid shrink-0 items-baseline overflow-hidden"
+          >
+            <FooterLayout />
+          </div>
+        </Transition>
       </div>
     </div>
   </div>

+ 27 - 30
src/views/drag-drop/index.vue

@@ -223,38 +223,35 @@ watch(
               <EmptyPlaceholder
                 :show="cloneTaskList.length <= 0"
                 description="把左边的任务拖拽到这里"
+              />
+              <VueDraggable
+                ref="cloneTaskListDragRef"
+                v-model="cloneTaskList"
+                :animation="150"
+                :scrollSensitivity="100"
+                ghostClass="ghost"
+                group="clone"
+                class="flex h-full flex-col gap-2 rounded bg-neutral-500/5 p-4 select-none"
+                style="min-height: 300px"
               >
-                <template #content>
-                  <VueDraggable
-                    ref="cloneTaskListDragRef"
-                    v-model="cloneTaskList"
-                    :animation="150"
-                    :scrollSensitivity="100"
-                    ghostClass="ghost"
-                    group="clone"
-                    class="flex h-full flex-col gap-2 rounded bg-neutral-500/5 p-4 select-none"
-                    style="min-height: 300px"
+                <div
+                  v-for="item in cloneTaskList"
+                  :key="item.key"
+                  class="flex h-14 cursor-move items-center justify-between rounded bg-neutral-500/8 px-4 py-3"
+                >
+                  <span>{{ item.name }}</span>
+                  <NButton
+                    quaternary
+                    circle
+                    size="small"
+                    @click="removeTask(item)"
                   >
-                    <div
-                      v-for="item in cloneTaskList"
-                      :key="item.key"
-                      class="flex h-14 cursor-move items-center justify-between rounded bg-neutral-500/8 px-4 py-3"
-                    >
-                      <span>{{ item.name }}</span>
-                      <NButton
-                        quaternary
-                        circle
-                        size="small"
-                        @click="removeTask(item)"
-                      >
-                        <template #icon>
-                          <span class="iconify ph--x"></span>
-                        </template>
-                      </NButton>
-                    </div>
-                  </VueDraggable>
-                </template>
-              </EmptyPlaceholder>
+                    <template #icon>
+                      <span class="iconify ph--x"></span>
+                    </template>
+                  </NButton>
+                </div>
+              </VueDraggable>
             </NScrollbar>
           </div>
         </template>