封装dialog组件思路记录

封装对话框

结构:最外面的div是遮罩层,固定定位,有个透黑的底色,在遮罩div的里面是对话框,对话框的结构是头部、内容部分和底部,是上中下的结构。

动态控制对话框的宽度和距离顶部的位置:组件通过props接收width(默认50%)和top(15vh) :style='{width,marginTop:top}'

头部结构:分为左右,左边是标题,右边是关闭按钮.

动态控制头部标题,有俩个方案:传入title,动态改变标题,第二是传入动态的标签,所以需要预留一个slot占位符(插槽),name为title。             

最终实现:结构是通过slot包裹一个span标签,假如使用对话框组件时是传入一个动态标签(具体的插槽)作为标题,会把span给替换掉!

{ {title}}

底部:预留一个name为foother的插槽

你可能感兴趣的:(javascript,html5,css3)