ayanova/src/components/gzconfirm.vue

@@ -1,6 +1,7 @@
+<!--
 <template>
   <v-dialog
-    v-model="dialog"
+    v-model="isVisible"
     :max-width="options.width"
     :style="{ zIndex: options.zIndex }"
     @keydown.esc="cancel"
@@ -18,7 +19,40 @@
     </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>
+        <v-card-title
+          class="headline lighten-2"
+          v-bind:class="options.type"
+          primary-title
+        >
+          {{ title }}
+        </v-card-title>
 
+        <v-card-text>
+          {{ message }}
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" text @click="isVisible = false">
+            I accept
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
 <script>
 /**
  * Vuetify Confirm Dialog component
@@ -50,20 +84,20 @@
  */
 export default {
   data: () => ({
-    dialog: false,
+    isVisible: false,
     resolve: null,
     reject: null,
     message: null,
     title: null,
     options: {
-      color: "primary",
+      type: "warning", //one of success, info, warning, and error, see v-alert docs for more info
       width: 290,
       zIndex: 200
     }
   }),
   methods: {
     open(title, message, options) {
-      this.dialog = true;
+      this.isVisible = true;
       this.title = title;
       this.message = message;
       this.options = Object.assign(this.options, options);
@@ -74,11 +108,11 @@ export default {
     },
     agree() {
       this.resolve(true);
-      this.dialog = false;
+      this.isVisible = false;
     },
     cancel() {
       this.resolve(false);
-      this.dialog = false;
+      this.isVisible = false;
     }
   }
 };