三.四其他小组件

本文主要是介绍三.四其他小组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、头部
2、logo组件
3、头部功能组件
4、视图组件
其他的没啥可以说的
视图数一下吧
说明白点就是
router封装的组件

<template><div:class="{ slideRight: state.slideclass.slideRight, slideLeft: state.slideclass.slideLeft , fadeInFadeOut: state.slideclass.fadeInFadeOut, zoomInCenter: state.slideclass.zoomInCenter,   slideTop: state.slideclass.slideTop, slideBottomr: state.slideclass.slideBottomr}" style="height: 100%;"><!--第一种和第二种都放弃了，因为一些原因，自己写的表格组件导致路由切换时出现空白页--><!-- <RouterView    v-slot="{ Component }"><transition name="slide"  mode="out-in" ><keep-alive   ><component :is="Component" /> </keep-alive></transition></RouterView> --> <!-- <RouterView    v-slot="{ Component }"><transition name="slide"  mode="out-in" > <component :is="Component" />  </transition></RouterView> --><transition name="slide"  mode="out-in" ><div><router-view ></router-view> </div></transition></div>
</template>

<script setup lang="ts"> import { reactive,nextTick,onMounted, watch,ref } from 'vue'; import { useRouter } from 'vue-router'// 配置缓存import { useConfig } from '../../../../stores/config' // 使用配置 store const router = useRouter();// 配置缓存const configStore = useConfig();//配置参数const state  = reactive({slideclass:{slideRight: true,slideLeft: false,slideTop: false,slideBottomr: false,fadeInFadeOut: false,zoomInCenter: false,}, });onMounted(() => {})watch(router.currentRoute, (newValue, oldValue) => { for (const key in state.slideclass) {state.slideclass[key] = false;}  console.log(router.currentRoute)state.slideclass[configStore.config.pagLoadingAnimationSwitch] = true;  });</script>

<style>.slide-enter-active,.slide-leave-active {transition: all 1s ease;}/* 向上滑动 */.slideTop .slide-enter-active {transition: all 0.5s ease-out;}.slideTop .slide-leave-active {transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);}.slideTop .slide-enter-from,.slideTop .slide-leave-to {transform: translateY(-50px);opacity: 0;}/* .slideTop .slide-enter {transform: translateY(100%);}.slideTop .slide-leave-to {transform: translateY(-100%);}.slideTop .animate {animation: slideTopAnimation 0.5s ease;}@keyframes slideTopAnimation {0% {opacity: 0;transform: translateY(100%);}100% {opacity: 1;transform: translateY(0%);}} *//*向下滑动 */
.slideBottomr .slide-enter-active {transition: all 0.5s ease-out;}.slideBottomr .slide-leave-active {transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);}.slideBottomr .slide-enter-from,.slideBottomr .slide-leave-to {transform: translateY(50px);opacity: 0;}
/* 	.slideBottomr .slide-enter {transform: translateY(100%);}.slideBottomr .slide-leave-to {transform: translateY(-100%);}.slideBottomr .animate {animation: slideBottomrAnimation 0.5s ease;}@keyframes slideBottomrAnimation {0% {opacity: 0;transform: translateY(-100%);}100% {opacity: 1;transform: translateY(0%);}} *//* 放大底部*/.zoomInTop .animate {animation: top 1s ease;}@keyframes top {from {transform: scaleY(0) translateY(-100%);}to {transform: scaleY(1) translateY(0);}}/* 放大底部*/.zoomInBottomr .animate {animation: bottom 0.5s ease;}@keyframes bottom {from {transform: scaleY(0) translateY(100%);}to {transform: scaleY(1) translateY(0);}}/* 放大中间 */.zoomInCenter .animate {animation: rotateAxis 0.5s ease;}@keyframes rotateAxis {0% {transform: scaleX(1);}50% {transform: scaleX(0);}100% {transform: scaleX(1);}}/* 淡入淡出 *//* .fadeInFadeOut  .slide-enter-active  {opacity: 0;transition: opacity 0.5s ease-in;} .fadeInFadeOut  .slide-leave-active {opacity: 1;transition: opacity 0.5s ease-out;} */.fadeInFadeOut .slide-enter-active {animation: fadeIn 0.5s ease;}.fadeInFadeOut .slide-leave-active {animation: fadeOut 0.5s ease;}@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}}@keyframes fadeOut {from {opacity: 1;}to {opacity: 0;}}/* 向左滑动 */
/* 	.slideLeft .slide-enter {transform: translateX(100%);}.slideLeft .slide-leave-to {transform: translateX(-100%);}.slideLeft .animate {animation: slideLeftAnimation 0.5s ease;}@keyframes slideLeftAnimation {0% {transform: translateX(0%);}100% {transform: translateX(-100%);}}*/.slideLeft .slide-enter-active {transition: all 0.5s ease-out;}.slideLeft .slide-leave-active {transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);}.slideLeft .slide-enter-from,.slideLeft .slide-leave-to {transform: translateX(-50px);opacity: 0;}/* 向右滑动 */.slideRight .slide-enter-active {transition: all 0.5s ease-out;}.slideRight .slide-leave-active {transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);}.slideRight .slide-enter-from,.slideRight .slide-leave-to {transform: translateX(50px);opacity: 0;}
/* 	.slideRight .slide-enter {transform: translateX(-100%);}.slideRight .slide-leave-to {transform: translateX(100%);}.slideRight .animate {animation: slideRightAnimation 0.5s ease;}@keyframes slideRightAnimation {0% {transform: translateX(-100%);}100% {transform: translateX(0%);}} */
</style>

这篇关于三.四其他小组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---