基于承诺的对话vue js？答案

【问题标题】：Promise based dialogue vue js?基于承诺的对话vue js？
【发布时间】：2018-10-24 03:34:35
【问题描述】：

我创建了一个插件，但我不知道如何创建一个基于 Promise 的插件。你能告诉我我需要在现有代码中添加什么吗？

我使用 vuetify js 来做材质样式

NotifyDlg.vue：这包含警告或确认对话的对话代码。根据消息类型，我将显示/隐藏按钮

<template>
  <v-dialog max-width="500px"
            v-model='dialogue'>
    <v-card>
      <v-card-title primary-title>
        <v-icon :color="messageType">{‌{messageType}}</v-icon>
        <title>{‌{title}}</title>
      </v-card-title>
      <v-card-text>{‌{message}}</v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn :color="messageType"
               flat
               v-if="confirmDlg"
               @click="value=true">Yes</v-btn>
        <v-btn :color="confirmDlg?'':'primary'"
               flat
               @click="value=false">{‌{getBtnText()}}</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
<script>
export default {
  props: {
    confirmDlg: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '',
      required: true
    },
    message: {
      type: String,
      default: '',
      required: true
    },
    messageType: {
      type: String,
      default: 'warning',
      required: true
    }
  },
  data () {
    return {
      value: false,
      dialogue:false
    }
  },
  methods: {
    getBtnText () {
      if (this.confirmDlg) return 'No'
      return 'Ok'
    }
  }
}
</script>

NotifyDlgPlugin.js：插件安装代码。然后这个方法会在 main.js 中使用 Vue.Use 方法调用。

import NotifyDlg from './NotifyDlg.vue'

export default {
  install: (Vue, options) => {
    Vue.prototype.$notifyDlg = {
      show (message, title, messageType, options = {}) {
        options.message = message
        options.title = title
        options.messageType = messageType
      }
    }
  }
}

从文档中我了解到只有可以在 install 方法中调用的全局函数。但我不明白如何调用我创建的对话或如何将真假值返回给被调用的方法。

对我的问题有什么建议吗？

【问题讨论】：

标签： javascript vue.js plugins

【解决方案1】：

我想分享我的基于承诺的对话代码：

import Dialog from "./Dialog.vue";

export function confirm(title, message) {
  return new Promise((resolve, reject) => {
    const dialog = new Vue({
      methods: {
        closeHandler(fn, arg) {
          return function() {
            fn(arg);
            dialog.$destroy();
            dialog.$el.remove();
          };
        }
      },
      render(h) {
        return h(Dialog, {
          props: {
            title,
            message,
          },
          on: {
            confirm: this.closeHandler(resolve),
            cancel: this.closeHandler(reject, new Error('canceled'))
          }
        });
      }
    }).$mount();
    document.body.appendChild(dialog.$el);
  });
}

这将创建对话框，将其添加到 DOM 并在对话框触发 this.$emit('confirm') 事件时解析。

【讨论】：

你可以在外面暴露 resolve 和 reject ，不需要创建一个全新的 vue 实例

【解决方案2】：

我刚刚发布了一个小型库，可以轻松使用 Promise 处理 Vue 3 中的对话框：https://github.com/rlemaigre/vue3-promise-dialog。从 Google 登陆此页面的人可能会发现它很有用:-)

【讨论】：