Commit 96021fad6d54ad79d8aa92f77c7bfa024f2449e4
1 parent
f65bed72
chore: modify the default route switching animation
Showing
7 changed files
with
16 additions
and
15 deletions
src/components/Button/index.vue
| ... | ... | @@ -4,9 +4,9 @@ |
| 4 | 4 | <slot :name="item" v-bind="data" /> |
| 5 | 5 | </template> --> |
| 6 | 6 | <template #default="data"> |
| 7 | - <g-icon :icon="preIcon" class="mr-1" v-if="preIcon" /> | |
| 7 | + <Icon :icon="preIcon" class="mr-1" v-if="preIcon" /> | |
| 8 | 8 | <slot v-bind="data" /> |
| 9 | - <g-icon :icon="preIcon" class="ml-1" v-if="postIcon" /> | |
| 9 | + <Icon :icon="postIcon" class="ml-1" v-if="postIcon" /> | |
| 10 | 10 | </template> |
| 11 | 11 | </Button> |
| 12 | 12 | </template> |
| ... | ... | @@ -18,10 +18,11 @@ |
| 18 | 18 | // import { extendSlots } from '/@/utils/helper/tsxHelper'; |
| 19 | 19 | import { useThrottle } from '/@/hooks/core/useThrottle'; |
| 20 | 20 | import { isFunction } from '/@/utils/is'; |
| 21 | + import Icon from '/@/components/Icon'; | |
| 21 | 22 | export default defineComponent({ |
| 22 | 23 | name: 'AButton', |
| 23 | 24 | inheritAttrs: false, |
| 24 | - components: { Button }, | |
| 25 | + components: { Button, Icon }, | |
| 25 | 26 | props: { |
| 26 | 27 | // 按钮类型 |
| 27 | 28 | type: { | ... | ... |
src/design/transition/fade.less
| 1 | 1 | .fade-enter-active, |
| 2 | 2 | .fade-leave-active { |
| 3 | - transition: opacity 0.1s ease-in-out; | |
| 3 | + transition: opacity 0.2s ease-in-out; | |
| 4 | 4 | } |
| 5 | 5 | |
| 6 | 6 | .fade-enter-from, |
| ... | ... | @@ -8,18 +8,18 @@ |
| 8 | 8 | opacity: 0; |
| 9 | 9 | } |
| 10 | 10 | |
| 11 | -/* fade-transform */ | |
| 12 | -.slide-fade-leave-active, | |
| 13 | -.slide-fade-enter-active { | |
| 14 | - transition: all 0.3s; | |
| 11 | +/* fade-slide */ | |
| 12 | +.fade-slide-leave-active, | |
| 13 | +.fade-slide-enter-active { | |
| 14 | + transition: all 0.5s; | |
| 15 | 15 | } |
| 16 | 16 | |
| 17 | -.slide-fade-enter-from { | |
| 17 | +.fade-slide-enter-from { | |
| 18 | 18 | opacity: 0; |
| 19 | 19 | transform: translateX(-30px); |
| 20 | 20 | } |
| 21 | 21 | |
| 22 | -.slide-fade-leave-to { | |
| 22 | +.fade-slide-leave-to { | |
| 23 | 23 | opacity: 0; |
| 24 | 24 | transform: translateX(30px); |
| 25 | 25 | } | ... | ... |
src/enums/appEnum.ts
src/layouts/default/multitabs/TabContent.tsx
| ... | ... | @@ -60,7 +60,7 @@ export default defineComponent({ |
| 60 | 60 | if (!tabItem) return; |
| 61 | 61 | const icon = tabItem.meta && tabItem.meta.icon; |
| 62 | 62 | if (!icon || !unref(getProjectConfigRef).multiTabsSetting.showIcon) return null; |
| 63 | - return <Icon icon={icon} class="align-middle mb-1" />; | |
| 63 | + return <Icon icon={icon} class="align-middle " style={{ marginBottom: '2px' }} />; | |
| 64 | 64 | } |
| 65 | 65 | function renderTabContent() { |
| 66 | 66 | const { tabItem: { meta } = {} } = props; | ... | ... |
src/layouts/default/setting/SettingDrawer.tsx
| ... | ... | @@ -65,7 +65,7 @@ const routerTransitionOptions = [ |
| 65 | 65 | RouterTransitionEnum.ZOOM_FADE, |
| 66 | 66 | RouterTransitionEnum.FADE, |
| 67 | 67 | RouterTransitionEnum.ZOOM_OUT, |
| 68 | - RouterTransitionEnum.SIDE_FADE, | |
| 68 | + RouterTransitionEnum.FADE_SIDE, | |
| 69 | 69 | RouterTransitionEnum.FADE_BOTTOM, |
| 70 | 70 | ].map((item) => { |
| 71 | 71 | return { | ... | ... |
src/settings/projectSetting.ts
| ... | ... | @@ -104,7 +104,7 @@ const setting: ProjectConfig = { |
| 104 | 104 | openRouterTransition: true, |
| 105 | 105 | |
| 106 | 106 | // 路由切换动画 |
| 107 | - routerTransition: RouterTransitionEnum.ZOOM_FADE, | |
| 107 | + routerTransition: RouterTransitionEnum.FADE_SIDE, | |
| 108 | 108 | |
| 109 | 109 | // 是否开启登录安全校验 |
| 110 | 110 | openLoginVerify: true, | ... | ... |
src/views/demo/feat/msg/index.vue
| ... | ... | @@ -55,7 +55,7 @@ |
| 55 | 55 | function handleLoading() { |
| 56 | 56 | createMessage.loading('Loading...'); |
| 57 | 57 | } |
| 58 | - function handleConfirm(type: 'warning' | 'error' | 'success') { | |
| 58 | + function handleConfirm(type: 'warning' | 'error' | 'success' | 'info') { | |
| 59 | 59 | createConfirm({ |
| 60 | 60 | iconType: type, |
| 61 | 61 | title: 'Tip', | ... | ... |