基于element-ui的vue组件的封装（二）

封装一个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>