fshows-anime-demo v1.2.13
Features
- An Anime design system for web.
Environment Support
- Support Vue 3
Using npm or yarn
$ npm install fshows-anime-demo
注册 main.ts
import anime from 'fshows-anime-demo'
app.use(anime)
引用 App.vue
<template>
<router-view v-slot="{ Component }">
<fs-transition>
<component :is="Component" />
</fs-transition>
</router-view>
</template>
<script setup lang="ts">
import { RouterView } from 'vue-router'
defineOptions({
name: 'App'
})
</script>
设置动画(前进/后退) 路由守卫 routerGuards.ts
import type { Router } from 'vue-router'
import { FsTransition } from 'fshows-anime-demo'
const { setEnterAnime, setLeaveAnime } = FsTransition.useTransition()
export function createRouterGuards(router: Router, whiteNameList: string[]) {
router.beforeEach(async (_to, from, next) => {
return setLeaveAnime(from).then(() => {
next()
})
})
router.afterEach((_to, from) => {
setEnterAnime(from)
console.log(whiteNameList, 'whiteNameList')
// if (!whiteNameList.includes(to.name as string)) {
// window.ap.setNavigationBar({ title: to.meta.title, reset: true })
// }
})
router.onError((error) => {
console.log(error, '路由错误')
})
}
设置动画(替换) hook routeReplaceChange 方法
const { setReplaceAnime } = FsTransition.useTransition()
export function routeReplaceChange(routeName: string, param?: LocationQueryRaw): void {
setReplaceAnime()
router.replace({
name: routeName,
query: param
})
}
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago