61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<script setup>
|
|
import ButtonGroup from "@/components/customUI/ButtonGroup.vue";
|
|
import AlertQuery from "./components/AlertQuery/AlertQuery.vue";
|
|
import AlertSetting from "./components/AlertSetting/AlertSetting.vue";
|
|
import { computed, watch, onBeforeMount, markRaw } from "vue";
|
|
import useActiveBtn from "@/hooks/useActiveBtn";
|
|
import { useI18n } from "vue-i18n";
|
|
const { t, locale } = useI18n();
|
|
const changeComponent = (e, item) => {
|
|
changeActiveBtn(item);
|
|
};
|
|
|
|
const { items, changeActiveBtn, setItems } = useActiveBtn();
|
|
|
|
const initializeItems = () => {
|
|
setItems([
|
|
{
|
|
title: t("alert.query_title"),
|
|
key: "Query",
|
|
active: true,
|
|
component: markRaw(AlertQuery),
|
|
},
|
|
{
|
|
title: t("alert.setting_title"),
|
|
key: "Setting",
|
|
active: false,
|
|
component: markRaw(AlertSetting),
|
|
},
|
|
]);
|
|
};
|
|
|
|
onBeforeMount(() => {
|
|
initializeItems();
|
|
});
|
|
|
|
watch(locale, () => {
|
|
initializeItems();
|
|
});
|
|
|
|
const activeTab = computed(() => {
|
|
return items.value.find(({ active }) => active);
|
|
});
|
|
|
|
const activeTitle = computed(() => {
|
|
return activeTab.value ? activeTab.value.title : '';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<h1 class="text-2xl font-extrabold mb-2">{{ activeTitle }}</h1>
|
|
<ButtonGroup
|
|
:items="items"
|
|
:withLine="true"
|
|
class="my-6"
|
|
:onclick="changeComponent"
|
|
/>
|
|
<component :is="activeTab.component"></component>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|