<!-- App.vue -->
<template>
  <NiceModalProvider>
    <router-view />
  </NiceModalProvider>
</template>

<script setup>
  import { NiceModal } from '@rpa/components'
  const NiceModalProvider = NiceModal.Provider
</script>

<!-- my-modal.vue -->
<template>
  <van-dialog
    show-cancel-button
    :value="modal.visible"
    :close-on-click-overlay="false"
    :title="title"
    :message="content"
    @closed="modal.remove"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  />
</template>

<script setup>
  import { NiceModal } from '@rpa/components'

  const modal = NiceModal.useModal()
  defineProps(['title', 'content'])

  const handleCancel = () => {
    modal.reject('cancel')
    modal.hide()
  }

  const handleConfirm = () => {
    modal.resolve('confirm')
    modal.hide()
  }
</script>

<!-- my-drawer.vue -->
<template>
  <a-drawer v-bind="NiceModal.antdDrawer(modal)">xxx</a-drawer>
</template>

<!-- my-modal.vue -->
<a-modal v-bind="NiceModal.antdModal(modal)">xxx</a-modal>

// my-modal.js
import { NiceModal } from '@rpa/components'

import _MyModal from './my-modal.vue'

export const MyModal = NiceModal.create(_MyModal)

async function showModal() {
  try {
    const res = await NiceModal.show(MyModal, {
      title: '标题',
      content: '内容',
    })
    console.log('结果:', res)
  }
  catch (error) {
    console.log('取消:', error)
  }
}

<template>
  <MyModal id="my-modal" />
</template>

<script setup>
  const showModal = async () => {
    try {
      const res = await NiceModal.show('my-modal', {
        title: '标题',
        content: '内容',
      })
      console.log('结果:', res)
    } catch (error) {
      console.log('取消:', error)
    }
  }
</script>

const modal = NiceModal.useModal(MyModal)

async function showModal() {
  try {
    const res = await modal.show({
      title: '标题',
      content: '内容',
    })
    console.log('结果:', res)
  }
  catch (error) {
    console.log('取消:', error)
  }
}

// 预先注册模态框
NiceModal.register('register-modal', MyModal)

async function showModal() {
  try {
    const res = await NiceModal.show('register-modal', {
      title: '标题',
      content: '内容',
    })
    console.log('结果:', res)
  }
  catch (error) {
    console.log('取消:', error)
  }
}