feat new dialog

diff --git a/src/popup/dialog/component.vue b/src/popup/dialog/component.vue
index 6c511cd..15a190c 100644 (file)
--- a/src/popup/dialog/component.vue
+++ b/src/popup/dialog/component.vue
@@ -20,7 +20,7 @@
   width: 200px;
   margin: 0px auto;
   padding: 20px 30px;
-  background-color: #fff;
+  background-color: #1bc1b0;
   border-radius: 2px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
   transition: all .3s ease;
@@ -29,12 +29,10 @@
 
 .modal-header {
   margin-top: 0;
-  color: #1bc1b0;
 }
 
 .modal-body {
   margin: 20px 0;
-  color: #1bc1b0;
 }
 
 .modal-default-button {
@@ -62,27 +60,27 @@
 
 <template>
   <transition name="modal">
-    <div class="modal-mask">
+    <div class="modal-mask" v-if="show">
       <div class="modal-wrapper">
         <div class="modal-container">
 
           <div class="modal-header">
             <slot name="header">
-              default header
+              {{ header }}
             </slot>
           </div>
 
           <div class="modal-body">
             <slot name="body">
-              default body
+              {{ body }}
             </slot>
           </div>
 
           <div class="modal-footer">
             <slot name="footer">
-              <button class="modal-default-button" @click="$emit('close')">
-                OK
-              </button>
+              <a class="btn btn-primary" @click="closeDialog()">
+                {{ confirm }}
+              </a>
             </slot>
           </div>
         </div>
@@ -94,5 +92,31 @@
 <script>
 export default {
   name: 'Dialog',
+  data() {
+    return {
+      show: false,
+    };
+  },
+  props: {
+    header: {
+      type: String
+    },
+    body: {
+      type: String
+    },
+    confirm: {
+      type: String,
+      default: "OK"
+    }
+  },
+  methods: {
+    showDialog: function() {
+      this.show = true;
+    },
+    closeDialog: function() {
+      this.show = false;
+      this.$emit('on-close');
+    }
+  }
 }
 </script>

diff --git a/src/popup/dialog/index.js b/src/popup/dialog/index.js
new file mode 100644 (file)
index 0000000..bff16e9
--- /dev/null
+++ b/src/popup/dialog/index.js
@@ -0,0 +1,51 @@
+import dialog from "./component"
+import Vue from 'vue';
+
+let instance;
+const dialogInstance = {
+  install: function (Vue, options) {
+    Vue.component('v-dialog', dialog);
+    Vue.prototype.$dialog = dialogInstance;
+  },
+  close: function() {
+    if(instance) {
+      instance.$children[0].closeDialog();
+      instance.onClose();
+    }
+  },
+  show: function(op) {
+    let data = {
+      header: op.header,
+      body: op.body,
+    };
+    if (op.confirm) {
+      data.confirm = op.confirm;
+    }
+    instance = new Vue({
+      data: data,
+      methods: {
+        onClose: function() {
+          this.$destroy();
+          document.getElementById("app").removeChild(this.$el);
+        },
+      },
+      render (h) {
+        return h(dialog, {
+          props: {
+            header: this.header,
+            body: this.body,
+            confirm: this.confirm,
+          },
+          on: {
+            onClose: this.onClose,
+          }
+        });
+      }
+    });
+    const component = instance.$mount();
+    document.getElementById("app").appendChild(component.$el);
+    instance.$children[0].showDialog();
+  }
+};
+
+export default dialogInstance;
\ No newline at end of file

diff --git a/src/popup/home/components/menu-creation.vue b/src/popup/home/components/menu-creation.vue
index d115bcf..7018291 100644 (file)
--- a/src/popup/home/components/menu-creation.vue
+++ b/src/popup/home/components/menu-creation.vue
@@ -95,7 +95,10 @@ export default {
         .catch(err => {
           console.log(err);
           loader.hide();
-          alert(err);
+          this.$dialog.show({
+            header: "提示",
+            body: err.message,
+          });
           // this.tips = err.message;
         });
     }

diff --git a/src/popup/home/components/menu-recovery.vue b/src/popup/home/components/menu-recovery.vue
index fd53b8a..402682f 100644 (file)
--- a/src/popup/home/components/menu-recovery.vue
+++ b/src/popup/home/components/menu-recovery.vue
@@ -55,7 +55,10 @@ export default {
           console.log(res);
         })
         .catch(error => {
-          alert(error);
+          this.$dialog.show({
+            header: "提示",
+            body: error,
+          });
         });
     }
   }

diff --git a/src/popup/home/components/transfer.vue b/src/popup/home/components/transfer.vue
index db5b766..286f6ba 100644 (file)
--- a/src/popup/home/components/transfer.vue
+++ b/src/popup/home/components/transfer.vue
@@ -204,7 +204,10 @@ export default {
     },
     confirmTransfer: function() {
       if (this.confirmPasssword != this.transaction.passwd) {
-        alert("密码不一致");
+        this.$dialog.show({
+          header: "提示",
+          body: "密码不一致",
+        });
         return;
       }
       let loader = this.$loading.show({
@@ -237,7 +240,10 @@ export default {
           this.confirmClose();
           this.transaction.passwd = "";
           this.confirmPasssword = "";
-          alert(error);
+          this.$dialog.show({
+            header: "提示",
+            body: err.message,
+          });
         });
     }
   }

diff --git a/src/popup/home/main.vue b/src/popup/home/main.vue
index bf78ed9..47f0af7 100644 (file)
--- a/src/popup/home/main.vue
+++ b/src/popup/home/main.vue
@@ -164,10 +164,6 @@
     <Menu ref="menu" @on-current-account="accountLoader" @accounts-clear="accountClear"></Menu>
     <Transfer ref="transfer" @on-success="refreshTransactions"></Transfer>
     <TxInfo ref="trxInfo" @on-success="refreshTransactions"></TxInfo>
-    <v-dialog v-if="showModal" @close="showModal = false">
-      <h3 slot="header">提示</h3>
-      <h5 slot="body">{{this.dialogMsg}}</h5>
-    </v-dialog>
   </div>
 </template>
 
@@ -188,8 +184,6 @@ export default {
   },
   data() {
     return {
-      dialogMsg: "",
-      showModal: false,
       network: "testnet",
       clipboard: new ClipboardJS(".address-text"),
       addressTitle: "点击复制地址",
@@ -293,12 +287,16 @@ export default {
     this.refreshTransactions();
 
     this.clipboard.on("success", (e) => {
-      this.dialogMsg = "coby success";
-      this.showModal = true;
+      this.$dialog.show({
+        header: "提示",
+        body: "coby success",
+      });
     });
     this.clipboard.on("error", (e) => {
-      this.dialogMsg = "coby error";
-      this.showModal = true;
+      this.$dialog.show({
+        header: "提示",
+        body: "coby error",
+      });
     });
   },
   beforeDestroy() {

diff --git a/src/popup/index.js b/src/popup/index.js
index 71771e7..37c2875 100644 (file)
--- a/src/popup/index.js
+++ b/src/popup/index.js
@@ -6,11 +6,11 @@ import vuescroll from 'vuescroll/dist/vuescroll-native';
 import 'vuescroll/dist/vuescroll.css';
 import "../assets/style.css";
 import 'vue-loading-overlay/dist/vue-loading.css';
-import dialog from "./dialog/component"
+import Dialog from "./dialog/index"
 
 Vue.use(Loading);
 Vue.use(vuescroll);
-Vue.component('v-dialog', dialog);
+Vue.use(Dialog);
 Vue.prototype.$vuescrollConfig = {
   bar: {
     mode: 'pure-native',

diff --git a/src/popup/login/components/form-addon.vue b/src/popup/login/components/form-addon.vue
index 080dc93..6aa2fe0 100644 (file)
--- a/src/popup/login/components/form-addon.vue
+++ b/src/popup/login/components/form-addon.vue
@@ -86,7 +86,10 @@ export default {
         })
         .catch(err => {
           loader.hide();
-          alert(err);
+          this.$dialog.show({
+            header: "提示",
+            body: err.message,
+          });
         });
     },
     recover: function() {

diff --git a/src/popup/login/components/form-recover.vue b/src/popup/login/components/form-recover.vue
index 8ee25fd..6c9fb4e 100644 (file)
--- a/src/popup/login/components/form-recover.vue
+++ b/src/popup/login/components/form-recover.vue
@@ -50,7 +50,10 @@ export default {
           localStorage.login = true;
         })
         .catch(error => {
-          alert(error);
+          this.$dialog.show({
+            header: "提示",
+            body: err.message,
+          });
         });
     },
     back: function() {