Vue 进阶之从 0 到 1 搭建组件库（三）

Vue 进阶之从 0 到 1 搭建组件库（三）

3 Dialog 组件

3.1 前置知识

• vue 过渡与动画
• sync 修饰符
• 具名插槽与 v-slot 指令

3.2 参数支持

参数名	参数描述	参数类型	默认值
title	对话框标题	string	提示
width	宽度	string	50%
top	与顶部的距离	string	15vh
visible	是否显示 dialog	boolean	false

3.3 事件支持

事件名	事件描述
opened	模态框显示的事件
closed	模态框关闭的事件

3.4 插槽说明

插槽名称	插槽描述
default	dialog的内容
title	dialog的标题
footer	dialog的底部操作区

3.5 基本结构

• 初始化，步骤与 button 一样
  1. components 文件夹下新建 dialog 文件夹，dialog 文件夹下新建文件 index.vue 和 index.scss
  2. src/components/dialog/index.vue

  <template>
    <div>dialog组件</div>
  </template>
  
  <script>
  export default {
        
    name: 'HmDialog'
  }
  </script>
  
  <style lang='scss' scoped>
  @import 'index.scss';
  </style>
  

  3. main.js 中注册 dialog 组件

  // 引入对话框组件
  import HmDialog from './components/dialog/index'
  // 全局注册
  Vue.component(HmDialog.name, HmDialog)
  

  4. App.vue 中使用 dialog，此时浏览器页面应该有 dialog组件 字样

  <template>
    <div id="app">
      <hm-dialog></hm-dialog>
    </div>
  </template>
  

• 基本结构
  1. 结构（这里就直接使用之前实现的 button 组件啦）

  <template>
    <!-- 对话框的遮罩 -->
    <div class="hm-dialog__wrapper">
      <!-- 对话框 -->
      <div class="hm-dialog">
        <!-- 对话框顶部 标题 + 关闭按钮 -->
        <div class="hm-dialog__header">
          <span class="hm-dialog__title">提示</span>
          <button class="hm-dialog__headerbtn">
            <i class="hm-icon-close"></i>
          </button>
        </div>
        <!-- 对话框内容 -->
        <div class="hm-dialog__body">
          <span>这是一段信息</span>
        </div>
        <!-- 对话框底部 一般都是一些操作 -->
        <div class="hm-dialog__footer">
          <hm-button>取消</hm-button>
          <hm-button type="primary">确定</hm-button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
        
    name: 'HmDialog'
  }
  </script>
  
  <style lang='scss' scoped>
  @import 'index.scss';
  </style>
  

  2. 样式 index.scss

  .hm-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);
  
    .hm-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