vue封装自己的组件库 02.封装dialog组件

---

link: https://blog.csdn.net/weixiaowei_2016/article/details/104702793

---

四、封装一个element-ui风格的dialog组件

前置知识：

1. vue过渡动画
2. sync修饰符
3. 具名插槽与v-slot指令

参数支持：

参数名

参数描述

参数类型

默认值

title

对话框标题

string

提示

width

宽度

string

50%

top

与顶部的距离

string

15vh

visible

是否显示dialog（支持sync修饰符）

boolean

false

事件支持：

事件名

事件描述

opened

模态框显示事件

closed

模态框关闭事件

插槽说明：

插槽名称

插槽描述

default

dialog的内容

title

dialog的标题

footer

dialog的底部操作区

4.1dialog组件的基本框架和样式

首先搭建起来dialog组件的框架，暂时不加入插槽，只构建出基本的框架和样式。

框架分为三个部分，头部（header）、内容（body）、底部（footer），基本框架如下：

<template>
 <div class="one-dialog_wrapper">
   <div class="one-dialog">
     <div class="one-dialog_header">
       <span class="one-dialog_title">提示</span>
       <button class="one-dialog_headerbtn">
         <i class="one-icon-close"></i>
       </button>
     </div>
     <div class="one-dialog_body">
       <span>这是一段信息</span>
     </div>
     <div class="one-dialog_footer">
       <one-button>取消</one-button>
       <one-button type="primary">确定</one-button>
     </div>
   </div>
 </div>
</template>

样式如下：

<style lang="scss" scoped>
.one-dialog_wrapper{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  z-index: 2001;
  background-color: rgba(0,0,0,0.5);
  .one-dialog{
    position: relative;
    margin: 15vh auto 50px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    box-sizing: border-box;
    width: 30%;
    &_header{
      padding: 20px 20px 10px;
      .one-dialog_title{
        line-height: 24px;
        font-size: 18px;
        color: #303133;
      }
      .one-dialog_headerbtn{
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 0;
        background: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        font-size: 16px;
        .one-icon-close{
          color:909399
        }
      }
    }
    &_body{
      padding: 30px 20px;
      color: #606266;
      font-size: 14px;
      word-break: break-all;
    }
    &_footer{
      padding: 10px 20px 20px;
      text-align: right;
      box-sizing: border-box;
      ::v-deep .one-button:first-child{
        margin-right: 20px;
      }
    }
  }
}
</style>

• 这里按钮样式的修改用到了深度穿透 https://www.jianshu.com/p/2c6ce46d8ed1 因为在dialog组件内部