注： 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 。

• 类型设置

  export default {
  methods: {
    showAlert() {
      this.- createDialog({
        type: 'alert',
        title: '我是标题',
        content: '我是内容',
        icon: 'cubeic-alert'
      }).show()
    }
  }
  }

• 按钮设置

  export default {
  methods: {
    showBtn() {
      this.- createDialog({
        type: 'confirm',
        icon: 'cubeic-alert',
        title: '我是标题',
        content: '我是内容',
        confirmBtn: {
          text: '确定按钮',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '取消按钮',
          active: false,
          disabled: false,
          href: 'javascript:;'
        onConfirm: () => {
          this.- createToast({
            type: 'warn',
            time: 1000,
            txt: '点击确认按钮'
          }).show()
        },
        onCancel: () => {
          this.- createToast({
            type: 'warn',
            time: 1000,
            txt: '点击取消按钮'
          }).show()
        }
      }).show()
    }
  }
  }

按钮设置可接受 String 或 Object 类型数据，当传入 Object 类型的数据时，可通过 text 字段来设置按钮文案内容、active 字段来设置按钮文案是否高亮、disabled 字段来设置按钮是否禁用、href 字段为按钮的跳转链接。

• 关闭按钮

  export default {
  methods: {
    showClose() {
      this.- createDialog({
        type: 'alert',
        icon: 'cubeic-alert',
        showClose: true,
        title: '标题',
        onClose: () => {
          this.- createToast({
            type: 'warn',
            time: 1000,
            txt: '点击关闭按钮'
          }).show()
        }
      }).show()
    }
  }
  }

• createDialog 的第二个参数是 render 函数，一般用于处理插槽的场景；Dialog 组件提供了 2 个具名的插槽 title 和 content，分别用来分发标题和内容。

• confirmBtn 子配置项

• cancelBtn 子配置项

原文: