@bikariya/modals

@bikariya/modals

模态框状态管理，基于 Pinia。

安装

pnpm i -D @bikariya/modals

使用方式

1. 在 nuxt.config.ts 中添加模块：

   export default defineNuxtConfig({
     modules: [
       "@bikariya/modals",
     ],
   });
   

2. 在根组件或 Layout 中添加模态框容器：

   <template>
     <bikariya-modals />
   </template>
   

3. 在 components 文件夹下创建模态框组件：

   <script lang="ts" setup>
     import type { ModalEmits, ModalProps } from "#modals";
   
     defineProps<ModalProps>();
     defineEmits<ModalEmits>();
   </script>
   
   <template>
     <transition>
       <div v-if="open">
         <span>I'm a modal.</span>
         <button @click="$emit(`close`)">Close</button>
       </div>
     </transition>
   </template>
   

4. 在页面或组件中使用模态框：

   <script lang="ts" setup>
     import { LazySimpleModal } from "#components";
   
     const modalStore = useModalStore();
     const { open, close } = modalStore.use(() => h(LazySimpleModal));
   </script>