用Vue3.0 写过组件吗?如果想实现一个 Modal你会怎么设计?

221 阅读1分钟

参考文献

参考文献

思路:

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