42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
import { computed } from "@vue/reactivity";
|
|
import { ref } from "vue";
|
|
export default function useActiveBtn(type = "single") {
|
|
// default buttons
|
|
const items = ref([]);
|
|
|
|
const setItems = (btnGroup) => {
|
|
items.value = btnGroup;
|
|
};
|
|
|
|
const selectedBtn = computed(() => {
|
|
if (type === "single") {
|
|
return items.value?.find((d) => {
|
|
return d.active
|
|
});
|
|
} else if (type === "multiple") {
|
|
return items.value?.filter(({ active }) => active);
|
|
}
|
|
});
|
|
|
|
// change active button
|
|
const changeActiveBtn = (item) => {
|
|
if (type === "single") {
|
|
// 先將全部變成false
|
|
const newItems = Object.assign(items.value).map((it) => ({
|
|
...it,
|
|
active: item.key === it.key,
|
|
}));
|
|
items.value = newItems;
|
|
} else if (type === "multiple") {
|
|
// 先將全部變成false
|
|
const newItems = Object.assign(items.value).map((it) => ({
|
|
...it,
|
|
active: item.key === it.key ? !item.active : it.active,
|
|
}));
|
|
items.value = newItems;
|
|
}
|
|
};
|
|
|
|
return { items, changeActiveBtn, setItems, selectedBtn };
|
|
}
|