mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-03-08 07:31:09 +08:00
feat(workflow): 为请假详情添加淡入动画效果
使用 motion-v 库为请假详情描述组件添加淡入动画,提升用户界面交互体验。同时调整容器最小高度以确保加载状态布局稳定。
This commit is contained in:
@@ -7,6 +7,7 @@ import { useTimeout } from '@vueuse/core';
|
||||
import { useRequest } from 'alova/client';
|
||||
import { Descriptions, Skeleton } from 'antdv-next';
|
||||
import dayjs from 'dayjs';
|
||||
import { motion } from 'motion-v';
|
||||
|
||||
import { leaveInfo } from './api';
|
||||
import { leaveTypeOptions } from './data';
|
||||
@@ -73,8 +74,15 @@ useTimeout(300, {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rounded-[6px] border p-2">
|
||||
<Descriptions v-if="data" :column="1" :items="items" size="middle" />
|
||||
<div class="min-h-[150px] rounded-[6px] border p-2">
|
||||
<motion.div
|
||||
v-if="data"
|
||||
:initial="{ opacity: 0 }"
|
||||
:animate="{ opacity: 1 }"
|
||||
:transition="{ duration: 0.3 }"
|
||||
>
|
||||
<Descriptions :column="1" :items="items" size="middle" />
|
||||
</motion.div>
|
||||
|
||||
<Skeleton v-else-if="showSkeleton && !data" active />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user