Dialog 对话框

使用指南

组件介绍

弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。

函数调用

Dialog 是一个函数而不是组件，因此可以直接调用，展示对应的提示弹窗

import { Dialog } from 'feart';

Dialog({ message: '提示' });

组件调用

通过组件调用 Dialog 时，可以通过下面的方式进行注册

import { Dialog } from 'feart';

export default {
  components: {
    'fe-dialog': Dialog.Component,
  },
};

代码演示

消息提示

用于提示一些消息，只包含一个确认按钮

Dialog.alert({
  title: '标题',
  message: '弹窗内容',
}).then(() => {
  // on close
});

Dialog.alert({
  message: '弹窗内容',
}).then(() => {
  // on close
});

消息确认

用于确认消息，包含取消和确认按钮

Dialog.confirm({
  title: '标题',
  message: '弹窗内容',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });

文本输入确认弹窗

用于确认消息，包含取消和确认按钮，res 为输入框返回值

Dialog.prompt({
  title: '标题',
  message: '弹窗内容',
})
  .then((res) => {
    // on confirm
  })
  .catch((res) => {
    // on cancel
  });

运营活动弹窗

用于运营活动图片展示

Dialog.activity({
  imgUrl: ... // imgUrl
}).then(() => {
  // on confirm
})

异步关闭

function beforeClose(action, done) {
  if (action === 'confirm') {
    setTimeout(done, 1000);
  } else {
    done();
  }
}

Dialog.confirm({
  title: '标题',
  message: '弹窗内容',
  beforeClose,
});

全局方法

引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 $dialog 方法，在所有组件内部都可以直接调用此方法

export default {
  mounted() {
    this.$dialog.alert({
      message: '弹窗内容',
    });
  },
};

组件调用

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式.

<fe-dialog
  showCancelButton
  :visible="this.visible"
  title="标题"
  @onConfirm="onConfirm('onConfirm')"
>
  <div>Dialog 对话框</div>
</fe-dialog>

export default {
  data() {
    return {
      visible: true,
    };
  },
  methods: {
    onConfirm(str) {
      console.log(str);
      this.visible = false;
    },
  },
};

API

方法

Options

通过函数调用 Dialog 时，支持传入以下通用选项（Dialog.activity 不通用）：

通过函数调用 Dialog.prompt 时，支持传入以下独立选项：

通过函数调用 Dialog.img 时，支持传入以下独立选项：

通过函数调用 Dialog.icon 时，支持传入以下独立选项：

通过函数调用 Dialog.activity 时，仅支持传入以下选项（不可使用 Dialog 通用参数选项）：

Props

通过组件调用 Dialog 时，支持以下 Props：

Slots

通过组件调用 Dialog 时，支持以下 Slots

Events

通过组件调用 Dialog 时，支持以下 Events。 使用方式：@onConfirm="onConfirm('onConfirm')"