123 lines
3.0 KiB
Vue
123 lines
3.0 KiB
Vue
<!--
|
|
<template>
|
|
<v-dialog
|
|
v-model="isVisible"
|
|
:max-width="options.width"
|
|
:style="{ zIndex: options.zIndex }"
|
|
@keydown.esc="cancel"
|
|
>
|
|
<v-card>
|
|
<v-toolbar dark :color="options.color" dense flat>
|
|
<v-toolbar-title class="white--text">{{ title }}</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-card-text v-show="!!message" class="pa-4">{{ message }}</v-card-text>
|
|
<v-card-actions class="pt-0">
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="primary darken-1" text @click.native="agree">Yes</v-btn>
|
|
<v-btn color="grey" text @click.native="cancel">Cancel</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
-->
|
|
<template>
|
|
<div class="text-center">
|
|
<v-dialog
|
|
persistent
|
|
v-model="isVisible"
|
|
:max-width="options.width"
|
|
@keydown.esc="cancel"
|
|
>
|
|
<v-card elevation="24">
|
|
<v-card-title class="headline lighten-2" primary-title>
|
|
<span v-if="options.title"> {{ options.title }} </span>
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
{{ options.message }}
|
|
</v-card-text>
|
|
|
|
<!-- <v-divider></v-divider> v-bind:class="options.type" -->
|
|
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn
|
|
v-if="options.noButtonText"
|
|
color="primary darken-1"
|
|
text
|
|
@click.native="cancel"
|
|
>{{ options.noButtonText }}</v-btn
|
|
>
|
|
<v-btn color="primary darken-1" text @click.native="agree">{{
|
|
options.yesButtonText
|
|
}}</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
/**
|
|
* Vuetify Confirm Dialog component
|
|
*
|
|
* Insert component where you want to use it:
|
|
* <confirm ref="confirm"></confirm>
|
|
*
|
|
* Call it:
|
|
* this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' }).then((confirm) => {})
|
|
* Or use await:
|
|
* if (await this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' })) {
|
|
* // yes
|
|
* }
|
|
* else {
|
|
* // cancel
|
|
* }
|
|
*
|
|
* Alternatively you can place it in main App component and access it globally via this.$root.$confirm
|
|
* <template>
|
|
* <v-app>
|
|
* ...
|
|
* <confirm ref="confirm"></confirm>
|
|
* </v-app>
|
|
* </template>
|
|
*
|
|
* mounted() {
|
|
* this.$root.$confirm = this.$refs.confirm.open
|
|
* }
|
|
*/
|
|
export default {
|
|
data: () => ({
|
|
isVisible: false,
|
|
resolve: null,
|
|
reject: null,
|
|
options: {
|
|
title: null,
|
|
message: null,
|
|
yesButtonText: null,
|
|
noButtonText: null,
|
|
type: "warning", //one of success, info, warning, and error, see v-alert docs for more info
|
|
width: 290,
|
|
zIndex: 200
|
|
}
|
|
}),
|
|
methods: {
|
|
open(options) {
|
|
this.options = Object.assign(this.options, options);
|
|
this.isVisible = true;
|
|
return new Promise((resolve, reject) => {
|
|
this.resolve = resolve;
|
|
this.reject = reject;
|
|
});
|
|
},
|
|
agree() {
|
|
this.resolve(true);
|
|
this.isVisible = false;
|
|
},
|
|
cancel() {
|
|
this.resolve(false);
|
|
this.isVisible = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|