分頁器


    <script>
        import "@/lib/Pagination"
    </script>
    <section>
        <na-pagination></na-pagination>
        <na-pagination total={1}></na-pagination>
        <na-pagination total={4}></na-pagination>
        <na-pagination total={7}></na-pagination>
        <na-pagination total={10} data-primary="danger"></na-pagination>
        <na-pagination total={36} data-primary="success"></na-pagination>
    </section>
    <script>
        import { message } from "@/scripts/client/message"
        type Primary = "success" | "danger" | "warning"
        async function onload() {
            for (const element of document.querySelectorAll("na-pagination")) {
                element.addEventListener("page-to", function (e) {
                    // e.preventDefault() 阻止翻頁
                    message({
                        content: `${(e as CustomEvent<number>).detail}`,
                        primary: (element.dataset.primary as Primary) || true,
                        duration: 200,
                    })
                })
                element.onChange = current => {
                    // 并非事件
                    // 翻頁被阻止時不觸發
                    console.log(current)
                }
            }
        }

        onload()
    </script>