马宇豪
2025-03-04 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c
src/layout/routerView/link.vue
@@ -1,9 +1,7 @@
<template>
   <div class="layout-view-bg-white flex layout-view-link" :style="{ height: `calc(100vh - ${setLinkHeight}` }">
      <a :href="currentRouteMeta.isLink" target="_blank" rel="opener" class="flex-margin">
         {{ $t(currentRouteMeta.title) }}:{{ currentRouteMeta.isLink }}
      </a>
   </div>
    <div class="layout-view-bg-white flex layout-view-link" :style="{ height: `calc(100vh - ${setLinkHeight}` }">
        <a :href="currentRouteMeta.isLink" target="_blank" rel="opener" class="flex-margin"> {{ $t(currentRouteMeta.title) }}:{{ currentRouteMeta.isLink }} </a>
    </div>
</template>
<script lang="ts">
@@ -14,48 +12,48 @@
// 定义接口来定义对象的类型
interface LinkViewState {
   currentRouteMeta: {
      isLink: string;
      title: string;
   };
    currentRouteMeta: {
        isLink: string;
        title: string;
    };
}
interface LinkViewRouteMeta extends RouteMeta {
   isLink: string;
   title: string;
    isLink: string;
    title: string;
}
export default defineComponent({
   name: 'layoutLinkView',
   setup() {
      const storesThemeConfig = useThemeConfig();
      const { themeConfig } = storeToRefs(storesThemeConfig);
      const route = useRoute();
      const state = reactive<LinkViewState>({
         currentRouteMeta: {
            isLink: '',
            title: '',
         },
      });
      // 设置 link 的高度
      const setLinkHeight = computed(() => {
         let { isTagsview } = themeConfig.value;
         if (isTagsview) return `115px`;
         else return `80px`;
      });
      // 监听路由的变化,设置内容
      watch(
         () => route.path,
         () => {
            state.currentRouteMeta = <LinkViewRouteMeta>route.meta;
         },
         {
            immediate: true,
         }
      );
      return {
         setLinkHeight,
         ...toRefs(state),
      };
   },
    name: 'layoutLinkView',
    setup() {
        const storesThemeConfig = useThemeConfig();
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const route = useRoute();
        const state = reactive<LinkViewState>({
            currentRouteMeta: {
                isLink: '',
                title: ''
            }
        });
        // 设置 link 的高度
        const setLinkHeight = computed(() => {
            let { isTagsview } = themeConfig.value;
            if (isTagsview) return `115px`;
            else return `80px`;
        });
        // 监听路由的变化,设置内容
        watch(
            () => route.path,
            () => {
                state.currentRouteMeta = <LinkViewRouteMeta>route.meta;
            },
            {
                immediate: true
            }
        );
        return {
            setLinkHeight,
            ...toRefs(state)
        };
    }
});
</script>