封装一个element-ui风格的dialog组件
前置知识:
-
Vue过渡动画
-
sync修饰符
-
具名插槽与v-slot指令
参数支持:
参数名 | 参数描述 | 参数类型 | 默认值 |
---|---|---|---|
title | 对话框标题 | string | 提示 |
width | 宽度 | string | 50% |
top | 与顶部距离 | string | 15vh |
visible | 是否显示dialog(支持sync修饰符) | boolean | false |
事件支持:
事件名 | 事件描述 |
---|---|
opened | 模态框显示事件 |
closed | 模态框关闭事件 |
插槽说明:
插槽名称 | 插槽描述 |
---|---|
default | dialog的内容 |
title | dialog标题 |
footer | dialog的底部操作 |
dialog组件的基本框架和样式
首先搭建起来的dialog组件额框架,暂时不加入插槽,只构建出基本的框架和样式。
框架分为三个部分,头部(header)、内容(body)、底部(footer),基本框架如下:
<template>
<div class="dl-dialog_wrapper">
<div class="dl-dialog">
<div class="dl-dialog_header">
<span class="dl-dialog_title">提示</span>
<button class="dl-dialog_headerbtn">
<i class="dl-icon-close"></i>
</button>
</div>
<div class="dl-dialog_body">
<span>这是一段信息</span>
</div>
<div class="dl-dialog_footer">
<dl-button>取消</dl-button>
<dl-button type="primary">确定</dl-button>
</div>
</div>
</div>
</template>
样式