1、探讨需求封装popup自定义弹窗组件
首先我们需要探讨一下,封装自定义的组件都需要什么功能
- 需要一个半透明灰色的背景,用于区分与非弹窗内容,点击灰色区域也可以关闭弹窗。
- 需要一个关闭按钮和两个操作按钮,一个确定,一个取消。
- 弹窗内容:标题,内容区域,因为是自定义所以都使用了具名插槽,也可以设置默认的显示内容。
- 弹窗的显示位置,本次封装只考虑了居中与页面底部两个常用显示位置。
2、实战开发弹窗组件
2.1 子组件内容 popup.vue文件
子组件默认标题 确定要取消订单吗?取消之后购物车也将清空。 确定 取消
注意:
本文CSS内容使用了scss语法,不使用的话可以将嵌套的样式拿出即可。解释说明:
- isShow 用于控制弹出层的显示与隐藏,在点击灰色空白区域和右上角关闭按钮,还有确定按钮与取消按钮之后都会关闭弹出层。
- bottom 用于控制弹出层的显示位置,默认为居中显示
- methods中向父组件传递了三个方法,分别是关闭弹窗,点击确定按钮,点击取消按钮
- 使用具名插槽,在父组件中可以自定义插槽中的内容,方便不同位置的弹窗显示样式
2.2 父组件引用子组件
显示弹出层 父组件自定义标题 这里是父组件引用子组件,使用具名插槽编写的自定义内容和样式。