├── static
    └── .gitkeep
├── .eslintignore
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── assets
    │   └── logo.png
    ├── plugins
    │   ├── index.js
    │   └── modal
    │   │   ├── main.vue
    │   │   └── index.js
    ├── main.js
    ├── router
    │   └── index.js
    ├── components
    │   ├── DemoWindow.vue
    │   └── HelloWorld.vue
    └── App.vue
├── .babelrc
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── README.md
├── index.html
├── .eslintrc.js
├── LICENSE
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /build/
2 | /config/
3 | /dist/
4 | /*.js
5 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hex-ci/vue-async-bootstrap-modal-demo/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/plugins/index.js:
--------------------------------------------------------------------------------
1 | import modal from './modal'
2 | 
3 | export default {
4 |   install(Vue) {
5 |     Vue.prototype.$modal = modal
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false
 5 |     }],
 6 |     "stage-2"
 7 |   ],
 8 |   "plugins": ["transform-runtime"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     // to edit target browsers: use "browserslist" field in package.json
 6 |     "postcss-import": {},
 7 |     "autoprefixer": {}
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | import router from './router'
 4 | import plugins from './plugins'
 5 | 
 6 | Vue.use(plugins)
 7 | 
 8 | Vue.config.productionTip = false
 9 | 
10 | /* eslint-disable no-new */
11 | new Vue({
12 |   el: '#app',
13 |   router,
14 |   render: h => h(App)
15 | })
16 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import HelloWorld from '@/components/HelloWorld'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   routes: [
 9 |     {
10 |       path: '/',
11 |       name: 'HelloWorld',
12 |       component: HelloWorld
13 |     }
14 |   ]
15 | })
16 | 


--------------------------------------------------------------------------------
/src/components/DemoWindow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>我是演示对话框！</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   data() {
 8 |     return {
 9 |       dialogOptions: {
10 |         title: '对话框演示标题'
11 |       }
12 |     }
13 |   },
14 | 
15 |   methods: {
16 |     dialogClickButton(button) {
17 |       console.log('对话框按下的按钮：')
18 |       console.log(button)
19 |     }
20 |   }
21 | }
22 | </script>
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue async bootstrap modal demo
 2 | 
 3 | > A Vue.js async bootstrap modal demo.
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | 
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | ```
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <router-view/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'app'
11 | }
12 | </script>
13 | 
14 | <style>
15 | #app {
16 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
17 |   -webkit-font-smoothing: antialiased;
18 |   -moz-osx-font-smoothing: grayscale;
19 |   text-align: center;
20 |   color: #2c3e50;
21 |   margin-top: 60px;
22 | }
23 | </style>
24 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>async-modal</title>
 7 |     <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
12 |     <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
13 |     <!-- built files will be auto injected -->
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // https://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   parser: 'babel-eslint',
 6 |   parserOptions: {
 7 |     sourceType: 'module'
 8 |   },
 9 |   env: {
10 |     browser: true,
11 |   },
12 |   // https://github.com/standard/standard/blob/master/docs/RULES-en.md
13 |   extends: 'standard',
14 |   // required to lint *.vue files
15 |   plugins: [
16 |     'html'
17 |   ],
18 |   // add your custom rules here
19 |   rules: {
20 |     "space-before-function-paren": [1, {
21 |       "anonymous": "never",
22 |       "named": "never",
23 |       "asyncArrow": "always"
24 |     }],
25 |     "brace-style": [1, "stroustrup", {"allowSingleLine": true}],
26 |     // allow async-await
27 |     'generator-star-spacing': 'off',
28 |     // allow debugger during development
29 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Hex
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <h2>演示对话框</h2>
 5 |     <p>
 6 |       <button type="button" class="btn btn-primary" @click="show">点击弹窗</button>
 7 |     </p>
 8 |     <h2>Essential Links</h2>
 9 |     <ul>
10 |       <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
11 |       <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
12 |       <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
13 |       <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
14 |       <br>
15 |       <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
16 |     </ul>
17 |     <h2>Ecosystem</h2>
18 |     <ul>
19 |       <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
20 |       <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
21 |       <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
22 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
23 |     </ul>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   name: 'HelloWorld',
30 | 
31 |   data() {
32 |     return {
33 |       msg: 'Welcome to Your Vue.js App'
34 |     }
35 |   },
36 | 
37 |   methods: {
38 |     async show() {
39 |       const result = await this.$modal.open('DemoWindow')
40 | 
41 |       console.log('父页面获取的对话框返回值：')
42 |       console.log(result)
43 |     }
44 |   }
45 | }
46 | </script>
47 | 
48 | <!-- Add "scoped" attribute to limit CSS to this component only -->
49 | <style scoped>
50 | h1, h2 {
51 |   font-weight: normal;
52 | }
53 | ul {
54 |   list-style-type: none;
55 |   padding: 0;
56 | }
57 | li {
58 |   display: inline-block;
59 |   margin: 0 10px;
60 | }
61 | a {
62 |   color: #42b983;
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/src/plugins/modal/main.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="modal fade">
 3 |     <div class="modal-dialog">
 4 |       <div class="modal-content">
 5 |         <div class="modal-header">
 6 |           <button type="button" class="close" @click="handleAction('close')">
 7 |             <span aria-hidden="true">&times;</span>
 8 |           </button>
 9 |           <h4 class="modal-title">{{ title }}</h4>
10 |         </div>
11 |         <div class="modal-body">
12 |           <vex-dialog-body ref="body"></vex-dialog-body>
13 |           <div class="overlay" v-show="loading">
14 |             <i class="glyphicon glyphicon-refresh"></i>
15 |           </div>
16 |         </div>
17 |         <div class="modal-footer">
18 |           <button type="button" class="btn btn-primary" @click="handleAction('ok')">确认</button>
19 |           <button type="button" class="btn btn-default" @click="handleAction('cancel')">取消</button>
20 |         </div>
21 |       </div>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 | import $ from 'jquery'
28 | 
29 | export default {
30 |   props: {
31 |     title: {
32 |       type: String,
33 |       default: ''
34 |     }
35 |   },
36 | 
37 |   data() {
38 |     return {
39 |       loading: false
40 |     }
41 |   },
42 | 
43 |   methods: {
44 |     handleAction(button) {
45 |       this.$emit('action', button)
46 |     },
47 | 
48 |     open() {
49 |       this.modalEl = $(this.$el).modal().one('hidden.bs.modal', () => {
50 |         this.modalEl.data('bs.modal', null).remove()
51 |       })
52 |     },
53 | 
54 |     close() {
55 |       this.modalEl.modal('hide')
56 |     }
57 |   }
58 | }
59 | </script>
60 | 
61 | <style scoped>
62 | .overlay {
63 |   text-align: center;
64 |   height: 30px;
65 |   line-height: 30px;
66 | }
67 | 
68 | .overlay .glyphicon-refresh {
69 |   animation: spin 2s infinite linear;
70 | }
71 | 
72 | @keyframes spin {
73 |   0% {
74 |     transform: rotate(0deg);
75 |   }
76 |   100% {
77 |     transform: rotate(359deg);
78 |   }
79 | }
80 | </style>
81 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-async-bootstrap-modal-demo",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js async bootstrap modal demo",
 5 |   "author": "Hex <hex@codeigniter.org.cn>",
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 8 |     "start": "npm run dev",
 9 |     "lint": "eslint --ext .js,.vue src",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "vue": "^2.5.2",
14 |     "vue-router": "^3.0.1"
15 |   },
16 |   "devDependencies": {
17 |     "autoprefixer": "^7.1.2",
18 |     "babel-core": "^6.22.1",
19 |     "babel-eslint": "^7.1.1",
20 |     "babel-loader": "^7.1.1",
21 |     "babel-plugin-transform-runtime": "^6.22.0",
22 |     "babel-preset-env": "^1.3.2",
23 |     "babel-preset-stage-2": "^6.22.0",
24 |     "chalk": "^2.0.1",
25 |     "copy-webpack-plugin": "^4.0.1",
26 |     "css-loader": "^0.28.0",
27 |     "eslint": "^3.19.0",
28 |     "eslint-config-standard": "^10.2.1",
29 |     "eslint-friendly-formatter": "^3.0.0",
30 |     "eslint-loader": "^1.7.1",
31 |     "eslint-plugin-html": "^3.0.0",
32 |     "eslint-plugin-import": "^2.7.0",
33 |     "eslint-plugin-node": "^5.2.0",
34 |     "eslint-plugin-promise": "^3.4.0",
35 |     "eslint-plugin-standard": "^3.0.1",
36 |     "eventsource-polyfill": "^0.9.6",
37 |     "extract-text-webpack-plugin": "^3.0.0",
38 |     "file-loader": "^1.1.4",
39 |     "friendly-errors-webpack-plugin": "^1.6.1",
40 |     "html-webpack-plugin": "^2.30.1",
41 |     "node-notifier": "^5.1.2",
42 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
43 |     "ora": "^1.2.0",
44 |     "portfinder": "^1.0.13",
45 |     "postcss-import": "^11.0.0",
46 |     "postcss-loader": "^2.0.8",
47 |     "rimraf": "^2.6.0",
48 |     "semver": "^5.3.0",
49 |     "shelljs": "^0.7.6",
50 |     "uglifyjs-webpack-plugin": "^1.1.1",
51 |     "url-loader": "^0.5.8",
52 |     "vue-loader": "^13.3.0",
53 |     "vue-style-loader": "^3.0.1",
54 |     "vue-template-compiler": "^2.5.2",
55 |     "webpack": "^3.6.0",
56 |     "webpack-bundle-analyzer": "^2.9.0",
57 |     "webpack-dev-server": "^2.9.1",
58 |     "webpack-merge": "^4.1.0"
59 |   },
60 |   "engines": {
61 |     "node": ">= 4.0.0",
62 |     "npm": ">= 3.0.0"
63 |   },
64 |   "browserslist": [
65 |     "> 1%",
66 |     "last 2 versions",
67 |     "not ie <= 8"
68 |   ]
69 | }
70 | 


--------------------------------------------------------------------------------
/src/plugins/modal/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import mainVue from './main.vue'
 3 | 
 4 | const Box = Vue.extend(mainVue)
 5 | 
 6 | export default {
 7 |   open(name, options = {}) {
 8 |     const defaultOptions = {}
 9 | 
10 |     options = Object.assign({}, defaultOptions, options)
11 | 
12 |     return new Promise((resolve) => {
13 |       const box = new Box({
14 |         el: document.createElement('div'),
15 |         components: {
16 |           VexDialogBody: () => import('@/components/' + name + '.vue').then((components) => {
17 |             components.default._Ctor = {}
18 | 
19 |             const dialogOptions = components.default.data().dialogOptions || {}
20 | 
21 |             if (!components.default.attached) {
22 |               components.default.backupCreated = components.default.created
23 |               components.default.backupMounted = components.default.mounted
24 |             }
25 | 
26 |             components.default.created = function() {
27 |               // 子组件已经实例化完毕
28 | 
29 |               if (components.default.backupCreated) {
30 |                 components.default.backupCreated.call(this)
31 |               }
32 |             }
33 | 
34 |             components.default.mounted = function() {
35 |               if (components.default.backupMounted) {
36 |                 components.default.backupMounted.call(this)
37 |               }
38 |             }
39 | 
40 |             box.loading = false
41 | 
42 |             box.title = dialogOptions.title || '对话框'
43 | 
44 |             components.default.attached = true
45 | 
46 |             return components
47 |           })
48 |         }
49 |       })
50 | 
51 |       box.$on('action', function(button) {
52 |         const instance = this.$refs.body
53 | 
54 |         if (!instance) {
55 |           return
56 |         }
57 | 
58 |         if (!instance.dialogClickButton) {
59 |           box.close()
60 |           box.$destroy()
61 | 
62 |           resolve('close')
63 | 
64 |           return
65 |         }
66 | 
67 |         const result = instance.dialogClickButton(button)
68 | 
69 |         if (result && result.then) {
70 |           result.then((result) => {
71 |             if (result === true || typeof result === 'undefined') {
72 |               box.close()
73 |               box.$destroy()
74 | 
75 |               resolve(button)
76 |             }
77 |           })
78 |         }
79 |         else {
80 |           if (result === true || typeof result === 'undefined') {
81 |             box.close()
82 |             box.$destroy()
83 | 
84 |             resolve(button)
85 |           }
86 |         }
87 |       })
88 | 
89 |       box.loading = true
90 |       box.title = '正在加载...'
91 |       box.open()
92 |     })
93 |   }
94 | }
95 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.2.5
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     // Use Eslint Loader?
24 |     // If true, your code will be linted during bundling and
25 |     // linting errors and warnings will be shown in the console.
26 |     useEslint: true,
27 |     // If true, eslint errors and warnings will also be shown in the error overlay
28 |     // in the browser.
29 |     showEslintErrorsInOverlay: false,
30 | 
31 |     /**
32 |      * Source Maps
33 |      */
34 | 
35 |     // https://webpack.js.org/configuration/devtool/#development
36 |     devtool: 'eval-source-map',
37 | 
38 |     // If you have problems debugging vue-files in devtools,
39 |     // set this to false - it *may* help
40 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
41 |     cacheBusting: true,
42 | 
43 |     // CSS Sourcemaps off by default because relative paths are "buggy"
44 |     // with this option, according to the CSS-Loader README
45 |     // (https://github.com/webpack/css-loader#sourcemaps)
46 |     // In our experience, they generally work as expected,
47 |     // just be aware of this issue when enabling this option.
48 |     cssSourceMap: false,
49 |   },
50 | 
51 |   build: {
52 |     // Template for index.html
53 |     index: path.resolve(__dirname, '../dist/index.html'),
54 | 
55 |     // Paths
56 |     assetsRoot: path.resolve(__dirname, '../dist'),
57 |     assetsSubDirectory: 'static',
58 |     assetsPublicPath: '/',
59 | 
60 |     /**
61 |      * Source Maps
62 |      */
63 | 
64 |     productionSourceMap: true,
65 |     // https://webpack.js.org/configuration/devtool/#production
66 |     devtool: '#source-map',
67 | 
68 |     // Gzip off by default as many popular static hosts such as
69 |     // Surge or Netlify already gzip all static assets for you.
70 |     // Before setting to `true`, make sure to:
71 |     // npm install --save-dev compression-webpack-plugin
72 |     productionGzip: false,
73 |     productionGzipExtensions: ['js', 'css'],
74 | 
75 |     // Run the build command with an extra argument to
76 |     // View the bundle analyzer report after build finishes:
77 |     // `npm run build --report`
78 |     // Set to `true` or `false` to always turn it on or off
79 |     bundleAnalyzerReport: process.env.npm_config_report
80 |   }
81 | }
82 | 


--------------------------------------------------------------------------------