frameView.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <script setup lang="ts">
  2. import { useRoute } from "vue-router";
  3. import { ref, unref, watch, onMounted, nextTick } from "vue";
  4. defineOptions({
  5. name: "FrameView"
  6. });
  7. const props = defineProps<{
  8. frameInfo?: {
  9. frameSrc?: string;
  10. fullPath?: string;
  11. };
  12. }>();
  13. const loading = ref(true);
  14. const currentRoute = useRoute();
  15. const frameSrc = ref<string>("");
  16. const frameRef = ref<HTMLElement | null>(null);
  17. if (unref(currentRoute.meta)?.frameSrc) {
  18. frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
  19. }
  20. unref(currentRoute.meta)?.frameLoading === false && hideLoading();
  21. function hideLoading() {
  22. loading.value = false;
  23. }
  24. function init() {
  25. nextTick(() => {
  26. const iframe = unref(frameRef);
  27. if (!iframe) return;
  28. const _frame = iframe as any;
  29. if (_frame.attachEvent) {
  30. _frame.attachEvent("onload", () => {
  31. hideLoading();
  32. });
  33. } else {
  34. iframe.onload = () => {
  35. hideLoading();
  36. };
  37. }
  38. });
  39. }
  40. watch(
  41. () => currentRoute.fullPath,
  42. path => {
  43. if (
  44. currentRoute.name === "Redirect" &&
  45. path.includes(props.frameInfo?.fullPath)
  46. ) {
  47. frameSrc.value = path; // redirect时,置换成任意值,待重定向后 重新赋值
  48. loading.value = true;
  49. }
  50. // 重新赋值
  51. if (props.frameInfo?.fullPath === path) {
  52. frameSrc.value = props.frameInfo?.frameSrc;
  53. }
  54. }
  55. );
  56. onMounted(() => {
  57. init();
  58. });
  59. </script>
  60. <template>
  61. <div v-loading="loading" class="frame" element-loading-text="加载中...">
  62. <iframe ref="frameRef" :src="frameSrc" class="frame-iframe" />
  63. </div>
  64. </template>
  65. <style lang="scss" scoped>
  66. .frame {
  67. position: absolute;
  68. inset: 0;
  69. .frame-iframe {
  70. box-sizing: border-box;
  71. width: 100%;
  72. height: 100%;
  73. overflow: hidden;
  74. border: 0;
  75. }
  76. }
  77. .main-content {
  78. margin: 2px 0 0 !important;
  79. }
  80. </style>