Vue 3 写 Dialog 组件你需要注意的几点

197 阅读1分钟

最近写的记账项目引用了别人的组件。虽然使用起来很简单但面对自己特定的需求时用起来还是不得劲,所以在慢慢自己造轮子。在此做个学习记录。

在将相关 HTML、css 部分完成,开始 js 部分过程中遇到了第一个问题:

关于 ok 与 cancel 的处理

开始的想法:

  • 点击 ok 触发 ok 事件之后调用 close 关闭。
  • 但是当有用户未输入信息不能关闭 Dialog 的需求就不满足要求了。
  • 我们要获取 ok 事件的返回值再判断。
  • 但是 emit 事件返回值永远是 undefited 怎么办? 用函数代替事件
  • 在初始化时给 Dialog 组件传 ok 函数,即在父组件中写好函数。

组件的标题和内容应该是自定义的。所以用到了插槽,那么使用 slot 标签又是如何实现一一对应的呢?

使用具名插槽 slot 自定义内容

  • 在 Dialog 组件中需要写插槽的地方写好有 name 属性的 slot 标签,即具名插槽
  • 在组件中写 Dialog 组件的地方加上自定义的内容
  • 自定义内容的标签上要绑定插槽的 name 属性值

使用 Teleport 组件

  • 防止 Dialog 被遮挡(css 层叠上下文),把 Dialog 移到 body 下
  • 在 Dialog 组件中使用 Teleport 将 Dialog 的内容包裹起来

关于遮罩层

  • 点击遮罩层也可关闭 Dialog
  • 可以向 Dialog 组件传一个属性
  • 属性类型为 Boolean 默认值为 true
  • 在遮罩层绑定单击事件,当属性为 true 时,触发关闭功能
  • 不需要此功能就可向 Dialog 组件传值为 false 的该属性