You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
29 lines
999 B
29 lines
999 B
<script lang="ts" setup> |
|
import { TabPane, Tabs } from 'ant-design-vue' |
|
import { ref } from 'vue' |
|
import { settingList } from './data' |
|
import BaseSetting from './BaseSetting.vue' |
|
import SecureSetting from './SecureSetting.vue' |
|
import AccountBind from './AccountBind.vue' |
|
import { ScrollContainer } from '@/components/Container/index' |
|
|
|
const wrapperRef = ref(null) |
|
|
|
const tabBarStyle = { width: '220px' } |
|
</script> |
|
|
|
<template> |
|
<ScrollContainer> |
|
<div ref="wrapperRef" class="m-3 rounded-1.5 bg-[var(--component-background)]"> |
|
<Tabs tab-position="left" :tab-bar-style="tabBarStyle"> |
|
<template v-for="item in settingList" :key="item.key"> |
|
<TabPane :tab="item.name"> |
|
<BaseSetting v-if="item.component === 'BaseSetting'" /> |
|
<SecureSetting v-if="item.component === 'SecureSetting'" /> |
|
<AccountBind v-if="item.component === 'AccountBind'" /> |
|
</TabPane> |
|
</template> |
|
</Tabs> |
|
</div> |
|
</ScrollContainer> |
|
</template>
|
|
|