Nice Modal Vue

这是个方便管理、调用弹窗、抽屉的 Vue 工具包，适用于 Ant Design Vue、Element Plus 等常用的 Vue 组件库。 代码逻辑抄袭借鉴自@ebay/nice-modal-react。

动机

使用 React 开发项目的时候偶然结识了 ebay 开源的工具库@ebay/nice-modal-react，感觉非常好用。 因为自己主要的技术栈是 Vue，但是经过搜索 Vue 似乎并没有类似功能的开源工具，于是便打算自己开发一版。

用法

注册弹窗

首先用<NiceModalProvider>包裹项目

1<!-- App.vue -->
2<template>
3  <NiceModalProvider>
4    <HelloWorld msg="Vite + Vue" />
5  </NiceModalProvider>
6</template>
7
8<script setup lang="ts">
9  import HelloWorld from './components/HelloWorld.vue'
10  import { NiceModalProvider } from 'nice-modal-vue'
11</script>

创建一个弹窗，这个弹窗需要用<NiceModalCreator>包裹

1<!-- DemoModal.vue -->
2<template>
3  <NiceModalCreator>
4    <Modal
5      :open="modal.visible"
6      @ok="() => {
7          modal.hide()
8      }"
9      @cancel="() => {
10          modal.hide()
11      }"
12    ></Modal>
13  </NiceModalCreator>
14</template>
15
16<script setup lang="ts">
17  import { NiceModalCreator, useModal } from 'nice-modal-vue'
18  import { Modal } from 'ant-design-vue'
19
20  const modal = useModal()
21  // 或者 const { visible, hide } = toRefs(useModal())
22</script>

上面这个组件无法在<template>中直接使用。

唤起弹窗

使用register方法注册函数后，就可以使用show方法展示弹窗了。

1<!-- HelloWorld.vue -->
2<template>
3  <div>
4    <button @click="handleClick">open modal</button>
5  </div>
6</template>
7
8<script setup lang="ts">
9  import { Button } from 'ant-design-vue'
10  import DemoModal from './DemoModal.vue'
11  import { register, show } from 'nice-modal-vue'
12
13  defineProps<{ msg: string }>()
14
15  register('demo-modal', DemoModal)
16
17  const handleClick = () => {
18    show('demo-modal')
19  }
20</script>

props 传递

show方法第二个参数可以传递props给弹窗，如果弹窗要读取props。需要对组件做调整

1<!-- DemoModal.vue -->
2<template>
3  <NiceModalCreator>
4    <!-- 从template中获取`show`函数传递的props -->
5    <template #="props">
6      <Modal
7        v-bind="props"
8        :open="modal.visible"
9        @ok="() => {
10          modal.hide()
11        }"
12        @cancel="() => {
13          modal.hide()
14        }"
15      ></Modal>
16    </template>
17  </NiceModalCreator>
18</template>
19
20<script setup lang="ts">
21  import { NiceModalCreator, useModal } from 'nice-modal-vue'
22  import { Modal } from 'ant-design-vue'
23
24  const modal = useModal()
25</script>

或者使用提供的帮助方法

1<!-- DemoModal.vue -->
2<template>
3  <NiceModalCreator>
4    <!-- 第二个参数是可选的，用于覆盖帮助方法提供的属性 -->
5    <Modal v-bind="antdModalV4(modal, { onOk })"></Modal>
6  </NiceModalCreator>
7</template>
8
9<script setup lang="ts">
10  import { NiceModalCreator, useModal, antdModalV4 } from 'nice-modal-vue'
11  import { Modal } from 'ant-design-vue'
12
13  const modal = useModal()
14
15  const onOk = () => {
16    console.log('ok')
17    modal.hide()
18  }
19</script>