Vue 的 Promise 对话框库 - vue-promise-dialogs

Vue 的 Promise 对话框库 - vue-promise-dialogs
插件名称 vue-promise-dialogs
发布时间 2021年6月25日
插件作者 Djaler

一个用于 Vue 的小型、promise 对话框库,可与异步函数一起使用。

安装和下载:

# NPM
$ npm i vue-promise-dialogs

使用

1. 导入 Promise Dialog 组件。

import { createPromiseDialog } from “vue-promise-dialogs”

2. 创建一个基本的承诺对话框。

const BooleanDialog = Vue.extend({
  template: `
    <div class="dialog">
        <p>{{ params.text }}</p>
        <button name="true" @click="$emit('resolve', true)">True</button>
        <button name="false" @click="$emit('resolve', false)">False</button>
        <button name="cancel" @click="$emit('reject', 'cancel')">Cancel</button>
    </div>
  `,
  props: {
      params: {
          type: Object,
          required: true,
      },
  },
});
// 第一个类型参数是将传递给组件的 params prop 的类型
// 第二个类型参数是实现承诺的值的类型
const openDialog = createPromiseDialog<{ text: string }, boolean>(BooleanDialog);
// 当你调用这个函数时,对话框将被挂载到 `PromiseDialogsWrapper`。
// 当用户按下任何按钮并发出解决/拒绝事件时,promise 将被解决,对话框将被销毁。
const result: boolean = await openDialog({ text: 'Some text' });

变更日志:

06/23/2021

  • v1.2.0: 添加强制关闭和拒绝所有对话框的方法

06/12/2021

  • v1.1.0:添加延迟对话框卸载的方法

2021 年 1 月 24 日

  • v1.0.2:错误修复