Javascript 基于承诺的对话vue js?
我已经创建了一个插件,但我不知道如何创建一个基于承诺的插件。你能告诉我需要在现有代码中添加什么吗 我使用vuetify js作为材质样式 NotifyDlg.vue:包含警报或确认对话的对话代码。根据消息类型,我将显示/隐藏按钮Javascript 基于承诺的对话vue js?,javascript,vue.js,plugins,Javascript,Vue.js,Plugins,我已经创建了一个插件,但我不知道如何创建一个基于承诺的插件。你能告诉我需要在现有代码中添加什么吗 我使用vuetify js作为材质样式 NotifyDlg.vue:包含警报或确认对话的对话代码。根据消息类型,我将显示/隐藏按钮 <template> <v-dialog max-width="500px" v-model='dialogue'> <v-card> <v-card-title primary-
<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>
从文档中,我了解了只能在install方法中调用的全局函数。但是我不明白如何调用我创建的对话,或者如何将真值或假值返回给被调用的方法
对我的问题有什么建议吗?我想分享我基于承诺的对话代码:
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);
});
}
这将在对话框触发
This.$emit('confirm')
事件时创建对话框,将其添加到DOM并解析。您只需在外部公开解析和拒绝,无需创建一个全新的vue实例
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);
});
}