bootbox代替alert

frontend/admin/package.json

@@ -20,10 +20,13 @@
     "babel-preset-es2015": "^6.0.0",
     "babel-preset-stage-2": "^6.0.0",
     "babel-register": "^6.0.0",
+    "bootbox": "^4.4.0",
+    "bootstrap-modal": "^2.0.0",
     "codemirror": "^5.17.0",
     "connect-history-api-fallback": "^1.1.0",
     "css-loader": "^0.23.0",
     "eventsource-polyfill": "^0.9.6",
+    "expose-loader": "^0.7.1",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.4",

frontend/admin/src/components/account/editUser.vue

@@ -126,10 +126,7 @@
                 this.request({
                     url: "/api/admin/user/",
                     method: "PUT",
-                    data: data,
+                    data: data
-                    success: (data)=> {
-                        alert("更新成功");
-                    }
                 })
             }
         },

frontend/admin/src/components/problem/problem.vue

@@ -14,6 +14,9 @@
         components: {
             simditor,
             uploader
+        },
+        ready() {
+            alert("111111");
         }
     })
 </script>

frontend/admin/src/components/utils/alert.vue

@@ -1,113 +0,0 @@
-<template>
-    <div>
-        <div class="modal-mask" v-show="showModal" transition="modal">
-            <div class="modal-wrapper">
-                <div class="modal-container">
-
-                    <div class="modal-header">
-                        <slot name="header">
-                            提示
-                        </slot>
-                    </div>
-
-                    <div class="modal-body">
-                        <slot name="body">
-                            {{ content }}
-                        </slot>
-                    </div>
-
-                    <div class="modal-footer">
-                        <slot name="footer">
-                            <button class="modal-default-button"
-                                    @click="show = false">
-                                OK
-                            </button>
-                        </slot>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default({
-        data() {
-            return {
-                showModal: false,
-                content: ""
-            }
-        },
-        events: {
-            "showModal": (content) => {
-                this.showModal = true;
-                this.content = true;
-                setTimeout(()=> {
-                    this.showModal = false;
-                }, 2000);
-            }
-        },
-    })
-</script>
-
-<style scoped>
-    .modal-mask {
-        position: fixed;
-        z-index: 9998;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, .5);
-        display: table;
-        transition: opacity .3s ease;
-    }
-
-    .modal-wrapper {
-        display: table-cell;
-        vertical-align: middle;
-    }
-
-    .modal-container {
-        width: 300px;
-        margin: 0 auto;
-        padding: 20px 30px;
-        background-color: #fff;
-        border-radius: 2px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
-        transition: all .3s ease;
-        font-family: Helvetica, Arial, sans-serif;
-    }
-
-    .modal-header h3 {
-        margin-top: 0;
-        color: #42b983;
-    }
-
-    .modal-body {
-        margin: 20px 0;
-    }
-
-    .modal-default-button {
-        float: right;
-    }
-
-    /*
-     * the following styles are auto-applied to elements with
-     * v-transition="modal" when their visiblity is toggled
-     * by Vue.js.
-     *
-     * You can easily play with the modal transition by editing
-     * these styles.
-     */
-
-    .modal-enter, .modal-leave {
-        opacity: 0;
-    }
-
-    .modal-enter .modal-container,
-    .modal-leave .modal-container {
-        -webkit-transform: scale(1.1);
-        transform: scale(1.1);
-    }
-</style>

frontend/admin/src/locales.js

@@ -1,5 +1,9 @@
 export default {
     "zh-cn": {
+        alert: {
+            alert: "提示",
+            OK: "确定"
+        },
         nav: {
             UserManagement: "用户管理"
         },

frontend/admin/src/main.js

@@ -8,8 +8,20 @@ import locale from "./locales"
 import userList from "./components/account/userList.vue"
 import editUser from "./components/account/editUser.vue"
 import problem from "./components/problem/problem.vue"
-import uploader from "./components/utils/uploader.vue"
+import "expose?$!expose?jQuery!jquery"
+import "bootstrap"
+import bootbox from "bootbox"
 
+Vue.use(VueI18n);
+
+
+// todo: strore lang config in localstorage
+var lang = "zh-cn";
+Vue.config.lang = lang;
+
+Object.keys(locale).forEach(function (lang) {
+    Vue.locale(lang, locale[lang])
+});
 
 var request = {
     install: function (Vue, options) {
@@ -29,7 +41,7 @@ var request = {
                     option.error(request)
                 }
                 else {
-                    alert("请求失败");
+                    alert(locale[lang].request.error);
                 }
             };
             request.onload = function () {
@@ -44,7 +56,12 @@ var request = {
                     catch (err) {
                         request.onerror();
                     }
-                    option.success(data);
+                    if(option.success) {
+                        option.success(data);
+                    }
+                    else {
+                        alert(locale[lang].request.succeeded);
+                    }
                 }
                 else {
                     request.onerror();
@@ -66,13 +83,6 @@ var request = {
 Vue.use(request);
 
 Vue.use(VueRouter);
-Vue.use(VueI18n);
-
-Vue.config.lang = "zh-cn";
-
-Object.keys(locale).forEach(function (lang) {
-    Vue.locale(lang, locale[lang])
-});
 
 
 var router = new VueRouter();
@@ -92,8 +102,24 @@ router.map({
     }
 });
 
+// hide loading
 document.getElementsByClassName("cssload-battery")[0].style.display = "none";
 
+// override window.alert
+function bootboxAlert(content) {
+    bootbox.dialog({
+        message: content,
+        title: locale[lang].alert.alert,
+        buttons: {
+            main: {
+                label: locale[lang].alert.OK,
+                className: "btn-primary"
+            }
+        }
+    })
+}
+window.alert = bootboxAlert;
+
 router.redirect({"/user": "/user/1"});
 router.start(App, '#app');