@bikariya/modals

@bikariya/modals

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

安装

pnpm i -D @bikariya/modals

使用方式

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

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

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

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

• 在 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>
  

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

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