最近写的记账项目引用了别人的组件。虽然使用起来很简单但面对自己特定的需求时用起来还是不得劲,所以在慢慢自己造轮子。在此做个学习记录。
在将相关 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 的该属性