<template>
  <ld-page>
    <l-radio-group v-model="current" variant="default-filled">
      <l-radio-button v-for="(item, index) in components" :key="index" :value="item.name">{{ item.title }}</l-radio-button>
    </l-radio-group>
    <transition name="fade" mode="out-in">
      <component :is="component"></component>
    </transition>
  </ld-page>
</template>
<script>
import { defineAsyncComponent } from 'vue';
const globs = import.meta.glob('@/components/*.vue')
export default {
  data () {
    return {
      current: '/src/components/DynamicComponent.vue'
    }
  },
  computed: {
    component () {
      return this.components.find((item) => item.name === this.current).component
    },
    components () {
      return Object.keys(globs).map((key) => {
        const component = defineAsyncComponent(globs[key])
        const title = key.match(/\/([^/]+)\.vue$/)[1]
        return {
          name: key,
          title,
          component
        }
      })
    }
  },
  created() {
  }
}
</script>
<style lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>