对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

基础用法

<template>
  <cb-button @click="showDialog">显示 test-window.vue 对话框</cb-button>
</template>

<script>
export default {
  methods: {
    async showDialog() {
      const { button } = await this.$cbDialog(() => import('./test-window'), {
        title: '测试对话框标题'
      });

      if (button == 'ok') {
        console.log('调用者: 确认按钮');
      }
    }
  }
}
</script>

对话框 test-window.vue 代码

<template>
  <p>测试对话框内容</p>
</template>

<script>
export default {
  data() {
    return {
      dialogOptions: {
        title: '测试对话框标题'
      }
    }
  },

  methods: {
    async dialogClickButton(button) {
      if (button === 'ok') {
        console.log('对话框内: 确认按钮');

        return true;
      }
    }
  }
}
</script>

全局方法

直接在组件中使用 this 调用

方法名 说明 参数 返回值
$cbDialog 展示弹窗，其中 name 参数是 .vue 文件的绝对路径，不要以 / 开头，views 目录是根目录。promise 返回值返回一个对象 { button, data } 其中 button 表示按钮名称，data 表示对话框组件返回值（如果有的话） name, options promise

Options

调用 $cbDialog 方法时，支持传入以下选项：

参数名 说明 类型 默认值
title 对话框标题 string —
width 对话框宽度，单位像素 number 600
hideClose 是否隐藏对话框关闭按钮 boolean false
buttons 对话框按钮的配置。如果是对象则 key 表示按钮名称，value 表示按钮文本；如果是数组，则每个数组元素为一个对象，对象 key 表示按钮名称，value 表示按钮文案。如果需要控制按钮显示顺序，则可以使用数组类型。注意：按钮名称为 ok 或 yes 的时候，按钮显示为蓝色。 object / array { ok: '确认', cancel: '取消' }
props 对话框传参，会把对象中相应 key 的 value 传递到对话框组件的 props 属性中。 object —

对话框组件内方法

在对话框 .vue 组件中的方法，用 this 调用

方法名 说明 参数 返回值
$autoAdjustPosition 自动调整对话框大小和位置，当你异步改变了对话框内容高度的时候，请手动调用此方法。 — —
$setTitle 设置对话框标题栏。 text —
$setButton 设置对话框按钮文案。button 表示按钮名称，例如 ok button, text —
$setButtons 批量设置对话框按钮。buttons 意义与上表中的 buttons 一致。 buttons —

对话框组件内 Options

在对话框 .vue 组件中的选项，放置于组件 data 中

参数名 说明 类型 默认值
dialogOptions 对话框选项，其中 key value 意义与上表 Options 意义一致（无 props）。 object —

对话框组件内回调

在对话框 .vue 组件中的回调，由对话框管理器主动调用

方法名 说明 参数 返回值
dialogClickButton 用户点击对话框按钮的时候自动调用，参数 button 表示用户按的按钮名称。无返回值：对话框关闭；返回 boolean 值：true 对话框关闭，false 对话框不关闭；返回 object 值：object.close 为 true 或 undefined 关闭对话框，否则不关闭；异步情况下请使用 promise 返回值，意义同上。另外，回调的返回值会放入对话框返回值的 data 属性中。注意：未定义此回调函数，对话框一律关闭。 button boolean / object / promise