| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- <template>
- <div class="home">
- <Header
- v-if="route.meta && !route.meta.hideHeader"
- :color="route.meta.color"
- />
- <div
- :class="!route.meta.hideHeader?'ptheader':''"
- :style="{'background': route.meta.color}"
- />
- <router-view :key="route.fullPath" />
- </div>
- </template>
- <script lang="ts">
- import { defineComponent, nextTick, onMounted, reactive, toRefs } from 'vue'
- import Header from '@/components/header/Comheader.vue'
- import { useRoute, onBeforeRouteUpdate } from 'vue-router'
- export default defineComponent({
- components: {
- Header
- },
- setup() {
- const route: any = useRoute()
- const data = reactive({
- route: route,
- transitionName: 'slide-right',
- showHeader: false
- })
- nextTick(() => {
- const document: any = window.document
- document.addEventListener('touchstart', function(event: any) {
- if (event.touches.length > 1) {
- event.preventDefault()
- }
- })
- document.addEventListener('gesturestart', function(event: any) {
- event.preventDefault()
- })
- })
- onMounted(() => {
- // debugger
- });
- return {
- ...toRefs(data
- )
- }
- }
- })
- </script>
- <style lang="scss" scoped>
- .home {
- .child-view {
- position: absolute;
- width: 100%;
- transition: all .8s cubic-bezier(.55, 0, .1, 1);
- }
- .slide-left-enter, .slide-right-leave-active {
- opacity: 0;
- -webkit-transform: translate(50px, 0);
- transform: translate(50px, 0);
- }
- .slide-left-leave-active, .slide-right-enter {
- opacity: 0;
- -webkit-transform: translate(-50px, 0);
- transform: translate(-50px, 0);
- }
- }
- </style>
|