Vue Nice Modal

vue-nice-modal 是一个工具库,可以将 Vue.js 的 modal 组件转换为基于 Promise 的 API。

灵感来源于 @ebay/nice-modal-react 和 vant。

支持 Vue 2.x,通过 vue-demi。

English | 简体中文

Examples

你可以在 examples/* 文件夹中查看示例。

安装

1npm install vue-nice-modal
2# or
3yarn add vue-nice-modal
4# or
5pnpm add vue-nice-modal

使用

1import { create } from 'vue-nice-modal';
2import MyModal from './MyModal.vue';
3
4const myModal = create(MyModal);
5
6myModal
7  .show({
8    title: 'Hello, world!',
9    content: 'This is a nice modal.',
10  })
11  .then((result) => {
12    console.log('Confirmed! Result:', result);
13  })
14  .catch((error) => {
15    console.error('Rejected! Error:', error);
16  });

自定义 Modal 组件

1<script setup lang="ts">
2import { Dialog } from 'vant';
3import { INiceModalHandlers } from 'vue-nice-modal';
4// inject hide/remove/callback methods by vue-nice-modal
5interface IProps extends INiceModalHandlers<number> {
6  visible: boolean;
7  // props you need
8  title: string;
9  content: string;
10}
11
12interface IEmits {
13  (e: 'update:visible', visible: boolean): void;
14}
15
16const props = defineProps<IProps>();
17
18// @ts-ignore
19const emit = defineEmits<IEmits>();
20
21const handleCancel = () => {
22  props.hide(); // or emit('update:visible', false)
23  props.callback('cancel'); // reject the promise
24};
25
26const handleConfirm = async () => {
27  // mock async function call
28  const sleep = (ms: number): Promise<number> =>
29    new Promise((res) =>
30      setTimeout(() => {
31        res(ms);
32      }, ms)
33    );
34
35  const payload = await sleep(1000);
36
37  // resolve the promise with payload
38  props.callback('confirm', payload);
39};
40</script>
41
42<template>
43  <Dialog
44    :show="visible"
45    @update:show="$emit('update:visible', false)"
46    @cancel="handleCancel"
47    @confirm="handleConfirm"
48    @closed="remove"
49    :title="title"
50    :content="content"
51    show-cancel-button
52    class="demo-dialog"
53  >
54    <div>Hello,Vue Nice Modal</div>
55  </Dialog>
56</template>

点击展开详细说明

本节提供了一个使用 vue-nice-modal 库创建自定义 modal 组件的示例。该示例使用 vant UI 库的 Dialog 组件作为示例,但您可以使用任何自定义 modal 组件。

要创建自己的 modal 组件,您需要定义一个继承 INiceModalHandlers 接口的接口。该接口应包括与您的 modal 组件相关的任何属性,例如标题属性和内容属性。您还可以包括任何其他需要的属性或方法。

在示例中,visible 属性和 update:visible 事件由 vue-nice-modal 注入到自定义 modal 组件中。这些用于控制 modal 组件的可见性。visible 属性应是一个布尔值,用于确定 modal 是可见的还是不可见,update:visible 事件应在 modal 的可见性改变时触发。

hide()、remove() 和 callback() 方法也由 vue-nice-modal 注入到自定义 modal 组件中。这些方法用于隐藏或删除 modal 组件,以及处理用户确认或取消 modal 操作。

一旦您定义了自己的自定义 modal 组件,您可以使用 vue-nice-modal 提供的 create() 函数来创建一个 Modal 对象,该对象公开 show()、hide() 和 remove() 方法。然后,您可以使用 show() 方法显示自定义 modal 组件,并使用 vue-nice-modal 提供的基于 Promise 的 API 处理用户确认或取消 modal 操作。

使用插件共享应用上下文(Vue@^3 only)

1import { createApp } from 'vue';
2import { VueNiceModalPluginForVue3 } from 'vue-nice-modal';
3import App from './App.vue';
4
5const app = createApp(App);
6
7app.use(VueNiceModalPluginForVue3);
8
9app.mount('#app');

Vue Nice Modal 在内部创建了一个新的 Vue 应用程序实例，并将用户创建的组件挂载到该实例中。这使得它可以在模态框中正常运行，而不会与主应用程序的状态和逻辑发生冲突。

然而，如果您需要在模态框中访问主应用程序中的数据或方法，您可以使用该插件实现共享上下文。

你可以通过在插件选项中传递 appKey 的形式来区分多个应用程序，并在创建模态框实例时将其传递。

1app.use(VueNiceModalPluginForVue3, { appKey: 'another app key' });
2
3create(MyModal, 'another app key');

在调用 app.use() 时，通过将选项对象传递给插件来传递 app 的 key（例如，{ appKey: 'another app key' }）。然后，在创建模态框实例时，需要将 appKey 作为选项传递给 create() 方法（例如，create(MyModal, 'another app key')）。这样就可以在多个应用程序中确保每个模态框都可以访问正确的上下文。

API

create(Comp: Component): Modal

create 函数接受 Vue.js 组件并返回一个带有以下方法的 Modal 对象:

show(options: ExtractOptions<ComponentProps>): Promise

显示 modal 组件并返回一个 Promise,如果用户确认 modal 则 resolve,如果用户取消则 reject。

options 参数是一个对象,包含与 modal 组件相关的属性(除去 vue-nice-modal 注入的通用属性与方法，仅包含用户自定义的所需 props)。ComponentProps 和 INiceModalHandlers 类型用于确保 options 对象的类型正确,并在编译时捕获与属性使用相关的任何错误。

以下是 show 方法的类型提示实现:

1type ComponentProps<C extends Component> = C extends new (...args: any) => any
2  ? Omit<
3      InstanceType<C>['$props'],
4      keyof VNodeProps | keyof AllowedComponentProps
5    >
6  : never;
7
8type ExtractOptions<T extends Record<string, any>> = Omit<
9  T,
10  keyof INiceModalHandlers | 'visible' | 'onUpdate:visible'
11>;
12
13export function create<C extends Component>(Comp: C) {
14  // ...
15
16  const show = (options: ExtractOptions<ComponentProps<C>>) => {
17    // ...
18  };
19
20  return {
21    show,
22    // ...
23  };
24}

hide(): void

隐藏 modal 组件。

remove(): void

从 DOM 中删除 modal 组件。

类型定义

vue-nice-modal 提供了一些 TypeScript 类型定义:

Modal

Modal 接口定义了 create 返回的对象的方法。

1interface Modal {
2  show: (options: ExtractOptions<ComponentProps<C>>) => Promise<any>;
3  hide: () => void;
4  remove: () => void;
5}

ComponentProps

ComponentProps 工具泛型用于获取 Vue 组件的属性。

1type ComponentProps<C extends Component> = C extends new (...args: any) => any
2  ? Omit<
3      InstanceType<C>['$props'],
4      keyof VNodeData | keyof AllowedComponentProps
5    >
6  : never;

INiceModalHandlers

INiceModalHandlers 接口定义了用于处理用户确认或取消 modal 的方法。

1export interface INiceModalHandlers<T = any> {
2  callback: (action: 'confirm' | 'cancel', payload?: T) => void;
3  remove: () => void;
4  hide: () => void;
5}

这些方法以及 visible 和 update:visible 事件将被注入用户的自定义 modal 组件中,即使不使用基于 Promise 的函数调用,相关属性也可以通过 v-model(visible 和 update:visible)传递从而控制组件的可见性。这允许用户按自己喜欢的方式控制 modal 组件的显示和隐藏,同时也确保了 vue-nice-modal 库的灵活性。

ExtractOptions<T extends Record<string, any>>

ExtractOptions 类型用于提取与 modal 组件相关的选项（除去 vue-nice-modal 注入的通用属性与方法）。

1type ExtractOptions<T extends Record<string, any>> = Omit<
2  T,
3  keyof INiceModalHandlers | 'visible' | 'onUpdate:visible'
4>;

注意

• modal 组件必须具有 visible 属性和 update:visible 事件以控制其可见性。请参阅 MyModal.vue 作为示例。
• vue-nice-modal 会在 DOM 中添加一个根元素 div.vue-nice-modal-root。请确保样式兼容。