<template>
  <el-tabs v-model="props.modelValue" style='margin-bottom:10px;' class="demo-tabs" @tab-click="handlClick">
    <el-tab-pane v-for='it in props.titleList' :key='it' :label="it.name" :name="it.value">
      <slot name="tabcar">

      </slot>
    </el-tab-pane>
  </el-tabs>
</template>
    <script setup>
import { ref, defineProps, defineEmits, } from "vue";
const emits = defineEmits(["handleChange"]); //子组件向父组件事件传递
const activeTitle = ref('')
const props = defineProps({
  modelValue: {
    default: "",
    type: String
  },
  titleList: {
    default: () => [],
    type: Array
  }
});
//标题选中事件
function handlClick (val) {
  emits("handleChange", JSON.parse(JSON.stringify(val.props)));
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__header {
  margin-bottom: 0px !important;
}
::v-deep .el-tabs__item {
  color: #000;
}
::v-deep .el-tabs__nav-scroll {
  background-color: var(--el-table-cell-bmx-backgroundcolor) !important;
}
::v-deep .el-tabs__item.is-active {
  color: var(--el-color-primary) !important;
}
::v-deep .el-tabs__active-bar {
  background-color: var(--el-color-primary) !important;
}
::v-deep .el-tabs__nav-wrap::after {
  background: none !important;
  margin-left: 21px;
}
::v-deep .el-tabs__nav {
  padding: 0 22px;
}
</style>