嘟嘟云A sass ui框架

目前dialog只是对el-dialog进行优化暂时并未重构所以api是一致的会新增功能但是不会减少功能 el-dialog (opens new window)

# 基础用法

点击打开 Dialog 这是一段信息
<template>
  <div>
    <db-button
      type="text"
      class="openEl"
      @click="dialogVisible = true"
    >点击打开 Dialog</db-button
    >

    <db-dialog :visible.sync="dialogVisible" title="提示" width="576px" >
      <span>这是一段信息</span>
      <template v-slot:footer>
        <db-button
          type="low"
          size="small"
          @click="dialogVisible = false"
        >取 消</db-button
        >
        <db-button @click="dialogVisible = false">确 定</db-button>
      </template>
    </db-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>
Expand Copy

# 设置对齐

  • 通过align和rowAlign分别可以设置横向对齐和竖向对齐

  • align 有 left right center三个选项

  • rowAlign 有 top bottom center 三个选项

点击打开 Dialog 这是一段信息
<template>
  <div>
    <db-button
      type="text"
      class="openEl"
      @click="dialogVisible = true"
    >点击打开 Dialog</db-button
    >

    <db-dialog :visible.sync="dialogVisible" title="提示" width="576px"
    align="center"
    rowAlign="center">
      <span>这是一段信息</span>
      <template v-slot:footer>
        <db-button
          type="low"
          size="small"
          @click="dialogVisible = false"
        >取 消</db-button
        >
        <db-button @click="dialogVisible = false">确 定</db-button>
      </template>
    </db-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>
Expand Copy

# 配合 alert

点击打开 Dialog 这是一段信息 未匹配到对应的代理人，请核实出单代理人信息并将该保单与代理人关联 取 消 确 定
<template>
  <div>
    <db-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</db-button
    >

    <db-dialog title="代理人未匹配" :visible.sync="dialogVisible" width="576px">
      <span>这是一段信息</span>
      <db-alert slot="header-alert" mode="warning">
        未匹配到对应的代理人，请核实出单代理人信息并将该保单与代理人关联
      </db-alert>
      <span slot="footer">
        <db-button @click="dialogVisible = false" type="low" size="small"
          >取 消</db-button
        >
        <db-button @click="dialogVisible = false" size="small">确 定</db-button>
      </span>
    </db-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
};
</script>
Expand Copy

# 设置圆角

点击打开 Dialog 这是一段信息
<template>
  <div>
    <db-button
      type="text"
      class="openEl"
      @click="dialogVisible = true"
    >点击打开 Dialog</db-button
    >

    <db-dialog :visible.sync="dialogVisible" title="提示" width="576px" :radius="20">
      <span>这是一段信息</span>
      <template v-slot:footer>
        <db-button
          type="low"
          size="small"
          @click="dialogVisible = false"
        >取 消</db-button
        >
        <db-button @click="dialogVisible = false">确 定</db-button>
      </template>
    </db-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>
Expand Copy

# 紧凑模式

点击打开 Dialog 这是一段信息
<template>
  <div>
    <db-button
      type="text"
      class="openEl"
      @click="dialogVisible = true"
    >点击打开 Dialog</db-button
    >

    <db-dialog :visible.sync="dialogVisible" title="提示" width="576px" mode="compact">
      <span>这是一段信息</span>
      <template v-slot:footer>
        <db-button
          type="low"
          size="small"
          @click="dialogVisible = false"
        >取 消</db-button
        >
        <db-button @click="dialogVisible = false">确 定</db-button>
      </template>
    </db-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>
Expand Copy

TIP

Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

TIP

如果 visible 属性绑定的变量位于 Vuex 的 store 内，那么 .sync 不会正常工作。此时需要去除 .sync 修饰符，同时监听 Dialog 的 open 和 close 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 visible 属性绑定的变量的值。

# Attributes

参数 说明 类型 可选值 默认值
visible 是否显示 Dialog，支持 .sync 修饰符 boolean — false
radius 设置圆角 number — -
mode 设置模式 string — -
title Dialog 的标题，也可通过具名 slot （见下表）传入 string — —
width Dialog 的宽度 string — 50%
fullscreen 是否为全屏 Dialog boolean — false
top Dialog CSS 中的 margin-top 值 string — 15vh
modal 是否需要遮罩层 boolean — true
modal-append-to-body 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上 boolean — true
append-to-body Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true boolean — false
lock-scroll 是否在 Dialog 出现时将 body 滚动锁定 boolean — true
custom-class Dialog 的自定义类名 string — —
close-on-click-modal 是否可以通过点击 modal 关闭 Dialog boolean — true
close-on-press-escape 是否可以通过按下 ESC 关闭 Dialog boolean — true
show-close 是否显示关闭按钮 boolean — true
before-close 关闭前的回调，会暂停 Dialog 的关闭 function(done)，done 用于关闭 Dialog — —
center 是否对头部和底部采用居中布局 boolean — false
destroy-on-close 关闭时销毁 Dialog 中的元素 boolean — false
max-height 设置最大高度 string — -

# Slot

name 说明
— Dialog 的内容
title Dialog 标题区的内容
footer Dialog 按钮操作区的内容

# Events

事件名称 说明 回调参数
open Dialog 打开的回调 —
opened Dialog 打开动画结束时的回调 —
close Dialog 关闭的回调 —
closed Dialog 关闭动画结束时的回调 —

← 警告 alert →