|
|
@@ -1,54 +0,0 @@
|
|
|
-<template>
|
|
|
- <a-tabs v-model:activeKey="activeKey">
|
|
|
- <a-tab-pane :key="tab.key" v-for="tab in tabs">
|
|
|
- <template #tab>
|
|
|
- <div class="tab-title">
|
|
|
- <span>
|
|
|
- <img :src="tab.key === activeKey ? tab.selectedIcon : tab.unSelectedIcon" alt="" />
|
|
|
- </span>
|
|
|
-
|
|
|
- <span>{{ tab.title }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div class="tabs-content">
|
|
|
- <slot :name="tab.slotName" v-if="tab.key === activeKey"></slot>
|
|
|
- </div>
|
|
|
- </a-tab-pane>
|
|
|
- </a-tabs>
|
|
|
-</template>
|
|
|
-<script setup>
|
|
|
- import { ref, watch } from 'vue';
|
|
|
- import { isEmpty } from 'lodash';
|
|
|
- const emits = defineEmits(['update:tabActiveKey', 'change']);
|
|
|
- const props = defineProps({
|
|
|
- tabs: {
|
|
|
- required: true,
|
|
|
- default: [],
|
|
|
- },
|
|
|
- tabActiveKey: {
|
|
|
- required: false,
|
|
|
- default: '',
|
|
|
- },
|
|
|
- });
|
|
|
-
|
|
|
- const activeKey = ref(isEmpty(props.tabActiveKey) ? props.tabs[0].key : props.tabActiveKey);
|
|
|
-
|
|
|
- watch(
|
|
|
- activeKey,
|
|
|
- (val) => {
|
|
|
- emits('change', val);
|
|
|
- },
|
|
|
- { immediate: true }
|
|
|
- );
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .tab-title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 5px;
|
|
|
- }
|
|
|
- .tabs-content {
|
|
|
- padding: 0 10px 10px 10px;
|
|
|
- }
|
|
|
-</style>
|