刚开始想通过给页面添加样式,来实现tabs跳转时过渡效果。但是我发现我好像不太会写。然后我知道有transition这个内置组件,来实现此效果。经过查看确实可以实现组件间的效果。
此处就不贴图了,代码也不多。大家仔细阅读即可。
<template>
<div class="dashboard_container">
<el-card v-if="role == 'admin'" class="tabs_wrap">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="工作台" name="dashList"></el-tab-pane>
<el-tab-pane label="名单派发" name="townDashBoard"></el-tab-pane>
</el-tabs>
</el-card>
<Transition name="fade" mode="out-in">
<component :is="activeComponent"></component>
</Transition>
</div>
</template>
js部分,需要大家新建几个组件导入。然后解析一下把,首先导入两个组件。然后定义tabs当前选中name,然后点击tabs触发事件,给定义的变量赋值。然后定义选中tabs所显示的组件,监听name的变化,然后赋值给变量。即可实现。很简单哦
<script setup lang="ts">
import townDashBoard from "./townDashBoard/index.vue";
import dashList from "./dashList/index.vue";
import { TabsPaneContext } from "element-plus";
const role = localStorage.getItem("role");
const activeName = ref("dashList");
const activeComponent = shallowRef(dashList);
watch(activeName, () => {
activeName.value == "dashList"
? (activeComponent.value = dashList)
: (activeComponent.value = townDashBoard);
});
const handleClick = (tab: TabsPaneContext) => {
activeName.value = tab.props.name as string;
};
</script>
过渡效果大家自行设置。
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s;
opacity: 0;
transform: translateX(30px);
}
版权声明:本文为m0_53273062原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。