feat: feat: 打开外部页面（内嵌/外链） (#226)

fix #173
Tencent · Feb 22, 2023 · 74779fa · 74779fa
1 parent 31a84e6
commit 74779fa
Show file tree

Hide file tree

Showing 3 changed files with 198 additions and 0 deletions.
diff --git a/src/pages/frame/doc/index.vue b/src/pages/frame/doc/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <div :class="`${prefix}-iframe-page`" :style="getWrapStyle">
+    <t-loading :loading="loading" size="large" :style="getWrapStyle">
+      <iframe ref="frameRef" :src="frameSrc" :class="`${prefix}-iframe-page__main`" @load="hideLoading"></iframe>
+    </t-loading>
+  </div>
+</template>
+<script lang="ts">
+import { prefix } from '@/config/global';
+import STYLE_CONFIG from '@/config/style';
+
+const computedStyle = getComputedStyle(document.documentElement);
+const sizeXxxl = computedStyle.getPropertyValue('--td-comp-size-xxxl');
+const paddingTBXxl = computedStyle.getPropertyValue('--td-comp-paddingTB-xxl');
+
+export default {
+  name: 'DetailAdvanced',
+  data() {
+    return {
+      prefix,
+      loading: true,
+      frameSrc: 'https://tdesign.tencent.com/starter/docs/vue/get-started',
+      settingStore: { ...STYLE_CONFIG },
+      getWrapStyle: `height: ${window.innerHeight}px`,
+    };
+  },
+  mounted() {
+    window.addEventListener('resize', this.calcHeight, false);
+    this.$nextTick(() => {
+      this.calcHeight();
+    });
+  },
+  methods: {
+    hideLoading() {
+      this.loading = false;
+      this.calcHeight();
+    },
+
+    getOuterHeight(dom: Element) {
+      let height = dom.clientHeight;
+      const computedStyle = window.getComputedStyle(dom);
+      height += parseInt(computedStyle.marginTop, 10);
+      height += parseInt(computedStyle.marginBottom, 10);
+      height += parseInt(computedStyle.borderTopWidth, 10);
+      height += parseInt(computedStyle.borderBottomWidth, 10);
+      return height;
+    },
+
+    calcHeight() {
+      const iframe = this.$refs.frameRef;
+      if (!iframe) {
+        return;
+      }
+      let clientHeight = 0;
+      const { showFooter, isUseTabsRouter, showBreadcrumb } = this.settingStore;
+      const headerHeight = parseFloat(sizeXxxl);
+      const navDom = document.querySelector('.t-tabs__nav');
+      const navHeight = isUseTabsRouter ? this.getOuterHeight(navDom) : 0;
+      const breadcrumbDom = document.querySelector('.t-breadcrumb');
+      const breadcrumbHeight = showBreadcrumb ? this.getOuterHeight(breadcrumbDom) : 0;
+      const contentPadding = parseFloat(paddingTBXxl) * 2;
+      const footerDom = document.querySelector('.t-layout__footer');
+      const footerHeight = showFooter ? this.getOuterHeight(footerDom) : 0;
+      const top = headerHeight + navHeight + breadcrumbHeight + contentPadding + footerHeight + 2;
+      window.innerHeight -= top;
+      clientHeight = document.documentElement.clientHeight - top;
+      iframe.style.height = `${clientHeight}px`;
+      this.getWrapStyle = `height: ${window.innerHeight}px`;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import '@/style/variables';
+
+.@{starter-prefix}-iframe-page {
+  &__main {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #fff;
+    border: 0;
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/src/pages/frame/tdesign/index.vue b/src/pages/frame/tdesign/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <div :class="`${prefix}-iframe-page`" :style="getWrapStyle">
+    <t-loading :loading="loading" size="large" :style="getWrapStyle">
+      <iframe ref="frameRef" :src="frameSrc" :class="`${prefix}-iframe-page__main`" @load="hideLoading"></iframe>
+    </t-loading>
+  </div>
+</template>
+<script lang="ts">
+import { prefix } from '@/config/global';
+import STYLE_CONFIG from '@/config/style';
+
+const computedStyle = getComputedStyle(document.documentElement);
+const sizeXxxl = computedStyle.getPropertyValue('--td-comp-size-xxxl');
+const paddingTBXxl = computedStyle.getPropertyValue('--td-comp-paddingTB-xxl');
+
+export default {
+  name: 'DetailAdvanced',
+  data() {
+    return {
+      prefix,
+      loading: true,
+      frameSrc: 'https://tdesign.tencent.com/vue-next/getting-started',
+      settingStore: { ...STYLE_CONFIG },
+      getWrapStyle: `height: ${window.innerHeight}px`,
+    };
+  },
+  mounted() {
+    window.addEventListener('resize', this.calcHeight, false);
+    this.$nextTick(() => {
+      this.calcHeight();
+    });
+  },
+  methods: {
+    hideLoading() {
+      this.loading = false;
+      this.calcHeight();
+    },
+
+    getOuterHeight(dom: Element) {
+      let height = dom.clientHeight;
+      const computedStyle = window.getComputedStyle(dom);
+      height += parseInt(computedStyle.marginTop, 10);
+      height += parseInt(computedStyle.marginBottom, 10);
+      height += parseInt(computedStyle.borderTopWidth, 10);
+      height += parseInt(computedStyle.borderBottomWidth, 10);
+      return height;
+    },
+
+    calcHeight() {
+      const iframe = this.$refs.frameRef;
+      if (!iframe) {
+        return;
+      }
+      let clientHeight = 0;
+      const { showFooter, isUseTabsRouter, showBreadcrumb } = this.settingStore;
+      const headerHeight = parseFloat(sizeXxxl);
+      const navDom = document.querySelector('.t-tabs__nav');
+      const navHeight = isUseTabsRouter ? this.getOuterHeight(navDom) : 0;
+      const breadcrumbDom = document.querySelector('.t-breadcrumb');
+      const breadcrumbHeight = showBreadcrumb ? this.getOuterHeight(breadcrumbDom) : 0;
+      const contentPadding = parseFloat(paddingTBXxl) * 2;
+      const footerDom = document.querySelector('.t-layout__footer');
+      const footerHeight = showFooter ? this.getOuterHeight(footerDom) : 0;
+      const top = headerHeight + navHeight + breadcrumbHeight + contentPadding + footerHeight + 2;
+      window.innerHeight -= top;
+      clientHeight = document.documentElement.clientHeight - top;
+      iframe.style.height = `${clientHeight}px`;
+      this.getWrapStyle = `height: ${window.innerHeight}px`;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import '@/style/variables';
+
+.@{starter-prefix}-iframe-page {
+  &__main {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #fff;
+    border: 0;
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
@@ -89,6 +89,32 @@ export default [
       },
     ],
   },
+  {
+    path: '/frame',
+    name: 'frame',
+    component: Layout,
+    redirect: '/frame/doc',
+    meta: { title: '外部页面', icon: 'internet' },
+    children: [
+      {
+        path: 'doc',
+        name: 'Doc',
+        component: () => import('@/pages/frame/doc/index.vue'),
+        meta: { title: '使用文档（内嵌）' },
+      },
+      {
+        path: 'TDesign',
+        name: 'TDesign',
+        component: () => import('@/pages/frame/tdesign/index.vue'),
+        meta: { title: 'TDesign 文档（内嵌）' },
+      },
+      {
+        path: 'https://tdesign.tencent.com/vue-next/getting-started',
+        name: 'TDesign2',
+        meta: { title: 'TDesign 文档（外链）' },
+      },
+    ],
+  },
   {
     path: '/result',
     name: 'result',