github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-27 14:13:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: modify the default route switching animation

Browse Source
This commit is contained in:
vben
2020-10-28 00:41:41 +08:00
parent f65bed72ac
commit 96021fad6d
7 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Button/index.vue
View File

@@ -4,9 +4,9 @@
<slot :name="item" v-bind="data" /> <slot :name="item" v-bind="data" />
</template> --> </template> -->
<template #default="data"> <template #default="data">
<g-icon :icon="preIcon" class="mr-1" v-if="preIcon" /> <Icon :icon="preIcon" class="mr-1" v-if="preIcon" />
<slot v-bind="data" /> <slot v-bind="data" />
<g-icon :icon="preIcon" class="ml-1" v-if="postIcon" /> <Icon :icon="postIcon" class="ml-1" v-if="postIcon" />
</template> </template>
</Button> </Button>
</template> </template>
@@ -18,10 +18,11 @@
// import { extendSlots } from '/@/utils/helper/tsxHelper'; // import { extendSlots } from '/@/utils/helper/tsxHelper';
import { useThrottle } from '/@/hooks/core/useThrottle'; import { useThrottle } from '/@/hooks/core/useThrottle';
import { isFunction } from '/@/utils/is'; import { isFunction } from '/@/utils/is';
import Icon from '/@/components/Icon';
export default defineComponent({ export default defineComponent({
name: 'AButton', name: 'AButton',
inheritAttrs: false, inheritAttrs: false,
components: { Button }, components: { Button, Icon },
props: { props: {
// 按钮类型 // 按钮类型
type: { type: {

14
src/design/transition/fade.less
View File

@@ -1,6 +1,6 @@
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity 0.1s ease-in-out; transition: opacity 0.2s ease-in-out;
} }
.fade-enter-from, .fade-enter-from,
@@ -8,18 +8,18 @@
opacity: 0; opacity: 0;
} }
/* fade-transform */ /* fade-slide */
.slide-fade-leave-active, .fade-slide-leave-active,
.slide-fade-enter-active { .fade-slide-enter-active {
transition: all 0.3s; transition: all 0.5s;
} }
.slide-fade-enter-from { .fade-slide-enter-from {
opacity: 0; opacity: 0;
transform: translateX(-30px); transform: translateX(-30px);
} }
.slide-fade-leave-to { .fade-slide-leave-to {
opacity: 0; opacity: 0;
transform: translateX(30px); transform: translateX(30px);
} }

2
src/enums/appEnum.ts
View File

@@ -29,7 +29,7 @@ export enum PermissionModeEnum {
export enum RouterTransitionEnum { export enum RouterTransitionEnum {
ZOOM_FADE = 'zoom-fade', ZOOM_FADE = 'zoom-fade',
ZOOM_OUT = 'zoom-out', ZOOM_OUT = 'zoom-out',
SIDE_FADE = 'slide-fade', FADE_SIDE = 'fade-slide',
FADE = 'fade', FADE = 'fade',
FADE_BOTTOM = 'fade-bottom', FADE_BOTTOM = 'fade-bottom',
} }

2
src/layouts/default/multitabs/TabContent.tsx
View File

@@ -60,7 +60,7 @@ export default defineComponent({
if (!tabItem) return; if (!tabItem) return;
const icon = tabItem.meta && tabItem.meta.icon; const icon = tabItem.meta && tabItem.meta.icon;
if (!icon || !unref(getProjectConfigRef).multiTabsSetting.showIcon) return null; if (!icon || !unref(getProjectConfigRef).multiTabsSetting.showIcon) return null;
return <Icon icon={icon} class="align-middle mb-1" />; return <Icon icon={icon} class="align-middle " style={{ marginBottom: '2px' }} />;
} }
function renderTabContent() { function renderTabContent() {
const { tabItem: { meta } = {} } = props; const { tabItem: { meta } = {} } = props;

2
src/layouts/default/setting/SettingDrawer.tsx
View File

@@ -65,7 +65,7 @@ const routerTransitionOptions = [
RouterTransitionEnum.ZOOM_FADE, RouterTransitionEnum.ZOOM_FADE,
RouterTransitionEnum.FADE, RouterTransitionEnum.FADE,
RouterTransitionEnum.ZOOM_OUT, RouterTransitionEnum.ZOOM_OUT,
RouterTransitionEnum.SIDE_FADE, RouterTransitionEnum.FADE_SIDE,
RouterTransitionEnum.FADE_BOTTOM, RouterTransitionEnum.FADE_BOTTOM,
].map((item) => { ].map((item) => {
return { return {

2
src/settings/projectSetting.ts
View File

@@ -104,7 +104,7 @@ const setting: ProjectConfig = {
openRouterTransition: true, openRouterTransition: true,
// 路由切换动画 // 路由切换动画
routerTransition: RouterTransitionEnum.ZOOM_FADE, routerTransition: RouterTransitionEnum.FADE_SIDE,
// 是否开启登录安全校验 // 是否开启登录安全校验
openLoginVerify: true, openLoginVerify: true,

2
src/views/demo/feat/msg/index.vue
View File

@@ -55,7 +55,7 @@
function handleLoading() { function handleLoading() {
createMessage.loading('Loading...'); createMessage.loading('Loading...');
} }
function handleConfirm(type: 'warning' | 'error' | 'success') { function handleConfirm(type: 'warning' | 'error' | 'success' | 'info') {
createConfirm({ createConfirm({
iconType: type, iconType: type,
title: 'Tip', title: 'Tip',