App.vue 1.9 KB

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