<template>
  <div class="dynamicTabs">
    <el-tabs v-model="active" :stretch="true">
      <el-tab-pane v-for="item in props.tabs" :key="item.name" :label="item.title" :name="item.name" lazy>
        <component :is="allComponents[item.componentName]" :item="item" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="dynamicTabs">
import allComponents from './components';
const props = defineProps({
  activeTab: {
    type: String,
    default: '',
  },
  tabs: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(['update:activeTab']);

const active = computed({
  get() {
    return props.activeTab;
  },
  set(val) {
    emit('update:activeTab', val);
  },
});
function TabClick(v) {
  console.log(v, 5555);
}
onMounted(() => {
  //默认选中第一个
  if (!props.activeTab && props.tabs.length) {
    active.value = props.tabs[0].name;
  }
});
</script>

<style lang="scss" scoped></style>