App.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template>
  2. <div class="home">
  3. <Header
  4. v-if="route.meta && !route.meta.hideHeader"
  5. :color="route.meta.color"
  6. />
  7. <div
  8. :class="!route.meta.hideHeader?'ptheader':''"
  9. :style="{'background': route.meta.color}"
  10. />
  11. <router-view :key="route.fullPath" />
  12. </div>
  13. </template>
  14. <script lang="ts">
  15. import { defineComponent, nextTick, onMounted, reactive, toRefs } from 'vue'
  16. import Header from '@/components/header/Comheader.vue'
  17. import { useRoute, onBeforeRouteUpdate } from 'vue-router'
  18. export default defineComponent({
  19. components: {
  20. Header
  21. },
  22. setup() {
  23. const route: any = useRoute()
  24. const data = reactive({
  25. route: route,
  26. transitionName: 'slide-right',
  27. showHeader: false
  28. })
  29. nextTick(() => {
  30. const document: any = window.document
  31. document.addEventListener('touchstart', function(event: any) {
  32. if (event.touches.length > 1) {
  33. event.preventDefault()
  34. }
  35. })
  36. document.addEventListener('gesturestart', function(event: any) {
  37. event.preventDefault()
  38. })
  39. })
  40. onMounted(() => {
  41. // debugger
  42. });
  43. return {
  44. ...toRefs(data
  45. )
  46. }
  47. }
  48. })
  49. </script>
  50. <style lang="scss" scoped>
  51. .home {
  52. .child-view {
  53. position: absolute;
  54. width: 100%;
  55. transition: all .8s cubic-bezier(.55, 0, .1, 1);
  56. }
  57. .slide-left-enter, .slide-right-leave-active {
  58. opacity: 0;
  59. -webkit-transform: translate(50px, 0);
  60. transform: translate(50px, 0);
  61. }
  62. .slide-left-leave-active, .slide-right-enter {
  63. opacity: 0;
  64. -webkit-transform: translate(-50px, 0);
  65. transform: translate(-50px, 0);
  66. }
  67. }
  68. </style>