index.vue

<template>
  <div v-if="showFrame">
    <template v-for="frame in getFramePages" :key="frame.path">
      <FramePage
        v-if="frame.meta.frameSrc && hasRenderFrame(frame.name)"
        v-show="showIframe(frame)"
        :frameSrc="frame.meta.frameSrc"
      />
    </template>
  </div>
</template>
<script lang="ts">
import { defineComponent, unref, computed } from 'vue'
import FramePage from '/@/views/sys/iframe/index.vue'

import { useFrameKeepAlive } from './useFrameKeepAlive'

export default defineComponent({
  name: 'FrameLayout',
  components: { FramePage },
  setup() {
    const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive()

    const showFrame = computed(() => unref(getFramePages).length > 0)

    return { getFramePages, hasRenderFrame, showIframe, showFrame }
  },
})
</script>