思路:
- ✅ 一个对话框需要的基本要素「标题,内容,确定/取消按钮」。内容需要灵活,所以可以是字符串,或一段 html 代码(也就是 slot )。
- ✅ 对话框需要“跳出”,避免来自父组件的“束缚”,用 Vue3
Teleport内置组件包裹。 - ✅ 调用对话框需要在每个父组件都进行引入
import Modal from '@/Modal',比较繁琐。考虑还可以采用 API 的形式,如在 Vue2 中:this.$modal.show({ /* 选项 */ })。 - ✅ API 的形式调用,内容可以是字符串,灵活的
h函数,或jsx语法进行渲染。 - ✅ 可全局配置对话框的样式,或者行为...,局部配置可进行覆盖。
- ✅ 国际化,可灵活与
vue-i18n糅合,即:如果没有引入vue-i18n默认显示中文版,反之,则会用vue-i18n的t方法来切换语言。 - ✅ 与 ts 结合,使基于 API 的形式调用更友好。