封装dialog组件思路记录

封装对话框

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

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

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

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

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

<div class='hm-header'>
  <slot name='title'>
     <span>{
  {title}}</span>
  </slot>
</div>

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

<div class='hm-foother' v-if='$solt.foother' >
  <slot name='foother'