64 lines
1.2 KiB
Vue
64 lines
1.2 KiB
Vue
<script setup>
|
|
import { onMounted, watch } from "vue";
|
|
import useActiveBtn from "@/hooks/useActiveBtn";
|
|
import useSearchParam from "@/hooks/useSearchParam";
|
|
import { useI18n } from "vue-i18n";
|
|
const { t, locale } = useI18n();
|
|
const { searchParams, changeParams } = useSearchParam();
|
|
const {
|
|
items,
|
|
changeActiveBtn,
|
|
setItems,
|
|
selectedBtn
|
|
} = useActiveBtn();
|
|
|
|
const initializeItems = () => {
|
|
setItems([
|
|
{
|
|
title: t("alert.unacked"),
|
|
key: "unacked",
|
|
active: true,
|
|
},
|
|
{
|
|
title: t("alert.acked"),
|
|
key: "acked",
|
|
active: false,
|
|
},
|
|
]);
|
|
};
|
|
|
|
onMounted(() => {
|
|
initializeItems();
|
|
});
|
|
|
|
watch(locale, () => {
|
|
initializeItems();
|
|
});
|
|
|
|
watch(
|
|
selectedBtn,
|
|
(newValue) => {
|
|
changeParams({ ...searchParams.value, isAck: newValue.key });
|
|
},
|
|
);
|
|
|
|
// 監聽搜尋變化
|
|
watch(
|
|
searchParams,
|
|
(newSearchParams) => {
|
|
if (!newSearchParams.isAck) {
|
|
changeParams({ ...newSearchParams, isAck: "unacked" });
|
|
}
|
|
},
|
|
{ immediate: true } // 確保在初始化立即觸發
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<ButtonGroup :items="items" :withLine="true" class="mr-5" :onclick="(e, item) => {
|
|
changeActiveBtn(item);
|
|
}" />
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|