├── modal.gif
├── package.json
├── .gitignore
├── README.md
└── src
    └── modal.vue


/modal.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coffcer/vue-bootstrap-modal/HEAD/modal.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bootstrap-modal",
 3 |   "description": "Bootstrap Style Modal for Vue",
 4 |   "version": "0.1.14",
 5 |   "author": "coffce",
 6 |   "main": "./src/modal.vue",
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "git+https://github.com/Coffcer/vue-bootstrap-modal"
10 |   },
11 |   "browserify": {
12 |     "transform": [
13 |       [
14 |         "babelify",
15 |         {
16 |           "presets": [
17 |             "es2015"
18 |           ]
19 |         }
20 |       ],
21 |       [
22 |         "vueify"
23 |       ]
24 |     ]
25 |   },
26 |   "keywords": [
27 |     "vue",
28 |     "modal",
29 |     "vue-modal"
30 |   ]
31 | }
32 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Windows image file caches
 2 | Thumbs.db
 3 | ehthumbs.db
 4 | 
 5 | # Folder config file
 6 | Desktop.ini
 7 | 
 8 | # Recycle Bin used on file shares
 9 | $RECYCLE.BIN/
10 | 
11 | # Windows Installer files
12 | *.cab
13 | *.msi
14 | *.msm
15 | *.msp
16 | 
17 | # Windows shortcuts
18 | *.lnk
19 | 
20 | # =========================
21 | # Operating System Files
22 | # =========================
23 | 
24 | # OSX
25 | # =========================
26 | 
27 | .DS_Store
28 | .AppleDouble
29 | .LSOverride
30 | 
31 | # Thumbnails
32 | ._*
33 | 
34 | # Files that might appear on external disk
35 | .Spotlight-V100
36 | .Trashes
37 | 
38 | # Directories potentially created on remote AFP share
39 | .AppleDB
40 | .AppleDesktop
41 | Network Trash Folder
42 | Temporary Items
43 | .apdisk
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-bootstrap-modal
  2 | 
  3 | Bootstrap style modal component for vue.
  4 | 
  5 | <img src="https://github.com/Coffcer/vue-bootstrap-modal/blob/master/modal.gif">
  6 | 
  7 | # Usage
  8 | 
  9 | import Bootstrap.css
 10 | ```
 11 | <link href="bootstrap.css"></link>
 12 | ```
 13 | **NOTE:**  By default, the modal style is pure bootstrap style, you can use any 3rd party bootstrap framework, like above GIF.
 14 | 
 15 | 
 16 | simple options:
 17 | ``` html
 18 | <!--text content-->
 19 | <modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel">
 20 |     Modal Text
 21 | </modal>
 22 | 
 23 | <!--custom content-->
 24 | <modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel">
 25 |     <div>Modal Body</div>
 26 |     
 27 |     <div slot="header">Modal Header</div>
 28 |     <div slot="title">Modal Title</div>
 29 |     <div slot="footer">Modal Footer</div>
 30 | </modal>
 31 | 
 32 | ```
 33 | 
 34 | #Props
 35 | ``` javascript
 36 | props: {
 37 |     show: {
 38 |         type: Boolean,
 39 |         twoWay: true,
 40 |         default: false
 41 |     },
 42 |     title: {
 43 |         type: String,
 44 |         default: 'Modal'
 45 |     },
 46 |     // Bootstrap small style modal
 47 |     small: {
 48 |         type: Boolean,
 49 |         default: false
 50 |     },
 51 |     // Bootstrap large style modal
 52 |     large: {
 53 |         type: Boolean,
 54 |         default: false
 55 |     },
 56 |     // Bootstrap full style modal    
 57 |     full: {
 58 |         type: Boolean,
 59 |         default: false
 60 |     },
 61 |     // if it set false, click background will close modal 
 62 |     force: {
 63 |         type: Boolean,
 64 |         default: false
 65 |     },
 66 |     // vue transition name
 67 |     transition: {
 68 |         type: String,
 69 |         default: 'modal'
 70 |     },
 71 |     // [OK button] text
 72 |     okText: {
 73 |         type: String,
 74 |         default: 'OK'
 75 |     },
 76 |     // [Cancel button] text
 77 |     cancelText: {
 78 |         type: String,
 79 |         default: 'Cancel'
 80 |     },
 81 |     // [OK button] className
 82 |     okClass: {
 83 |         type: String,
 84 |         default: 'btn blue'
 85 |     },
 86 |     // [Cancel button] className
 87 |     cancelClass: {
 88 |         type: String,
 89 |         default: 'btn red btn-outline'
 90 |     },
 91 |     // automatically close when click [OK button]
 92 |     closeWhenOK: {
 93 |         type: Boolean,
 94 |         default: false
 95 |     }
 96 | }
 97 | ```
 98 | 
 99 | # License
100 | MIT


--------------------------------------------------------------------------------
/src/modal.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     /**
  3 |      * Bootstrap Style Modal Component for Vue
  4 |      * Depend on Bootstrap.css
  5 |      */
  6 | 
  7 |      export default {
  8 |         props: {
  9 |             show: {
 10 |                 type: Boolean,
 11 |                 twoWay: true,
 12 |                 default: false
 13 |             },
 14 |             title: {
 15 |                 type: String,
 16 |                 default: 'Modal'
 17 |             },
 18 |             small: {
 19 |                 type: Boolean,
 20 |                 default: false
 21 |             },
 22 |             large: {
 23 |                 type: Boolean,
 24 |                 default: false
 25 |             },
 26 |             full: {
 27 |                 type: Boolean,
 28 |                 default: false
 29 |             },
 30 |             // 为true时无法通过点击遮罩层关闭modal
 31 |             force: {
 32 |                 type: Boolean,
 33 |                 default: false
 34 |             },
 35 |             // 自定义组件transition
 36 |             transition: {
 37 |                 type: String,
 38 |                 default: 'modal'
 39 |             },
 40 |             // 确认按钮text
 41 |             okText: {
 42 |                 type: String,
 43 |                 default: 'OK'
 44 |             },
 45 |             // 取消按钮text
 46 |             cancelText: {
 47 |                 type: String,
 48 |                 default: 'Cancel'
 49 |             },
 50 |             // 确认按钮className
 51 |             okClass: {
 52 |                 type: String,
 53 |                 default: 'btn blue'
 54 |             },
 55 |             // 取消按钮className
 56 |             cancelClass: {
 57 |                 type: String,
 58 |                 default: 'btn red btn-outline'
 59 |             },
 60 |             // 点击确定时关闭Modal
 61 |             // 默认为false，由父组件控制prop.show来关闭
 62 |             closeWhenOK: {
 63 |                 type: Boolean,
 64 |                 default: false
 65 |             }
 66 |         },
 67 |         data () {
 68 |             return {
 69 |                 duration: null
 70 |             };
 71 |         },
 72 |         computed: {
 73 |             modalClass () {
 74 |                 return {
 75 |                     'modal-lg': this.large,
 76 |                     'modal-sm': this.small,
 77 |                     'modal-full': this.full
 78 |                 }
 79 |             }
 80 |         },
 81 |         created () {
 82 |             if (this.show) {
 83 |                 document.body.className += ' modal-open';
 84 |             }
 85 |         },
 86 |         beforeDestroy () {
 87 |             document.body.className = document.body.className.replace(/\s?modal-open/, '');
 88 |         },
 89 |         watch: {
 90 |             show (value) {
 91 |                 // 在显示时去掉body滚动条，防止出现双滚动条
 92 |                 if (value) {
 93 |                     document.body.className += ' modal-open';
 94 |                 }
 95 |                 // 在modal动画结束后再加上body滚动条
 96 |                 else {
 97 |                     if (!this.duration) {
 98 |                         this.duration = window.getComputedStyle(this.$el)['transition-duration'].replace('s', '') * 1000;
 99 |                     }
100 | 
101 |                     window.setTimeout(() => {
102 |                         document.body.className = document.body.className.replace(/\s?modal-open/, '');
103 |                     }, this.duration || 0);
104 |                 }
105 |             }
106 |         },
107 |         methods: {
108 |             ok () {
109 |                 this.$emit('ok');
110 |                 if (this.closeWhenOK) {
111 |                     this.show = false;
112 |                 }
113 |             },
114 |             cancel () {
115 |                 this.$emit('cancel');
116 |                 this.show = false;
117 |             },
118 |             // 点击遮罩层
119 |             clickMask () {
120 |                 if (!this.force) {
121 |                     this.cancel();
122 |                 }
123 |             }
124 |         }
125 |      };
126 | </script>
127 | 
128 | <template>
129 |     <div v-show="show" :transition="transition">
130 |         <div class="modal" @click.self="clickMask">
131 |             <div class="modal-dialog" :class="modalClass" v-el:dialog>
132 |                 <div class="modal-content">
133 |                     <!--Header-->
134 |                     <div class="modal-header">
135 |                         <slot name="header">
136 |                             <a type="button" class="close" @click="cancel">x</a>
137 |                             <h4 class="modal-title">
138 |                                 <slot name="title">
139 |                                     {{title}}
140 |                                 </slot>
141 |                             </h4>
142 |                         </slot>
143 |                     </div>
144 |                     <!--Container-->
145 |                     <div class="modal-body">
146 |                         <slot></slot>
147 |                     </div>
148 |                     <!--Footer-->
149 |                     <div class="modal-footer">
150 |                         <slot name="footer">
151 |                             <button type="button" :class="cancelClass" @click="cancel">{{cancelText}}</button>
152 |                             <button type="button" :class="okClass" @click="ok">{{okText}}</button>
153 |                         </slot>
154 |                     </div>
155 |                 </div>
156 |             </div>
157 |         </div>
158 |         <div class="modal-backdrop in"></div>
159 |     </div>
160 | </template>
161 | 
162 | <style scoped>
163 |     .modal {
164 |         display: block;
165 |     }
166 |     .modal-transition {
167 |         transition: all .6s ease;
168 |     }
169 |     .modal-leave {
170 |         /* 样式没什么用，但可以让根标签的transitionEnd生效，以去掉modal-leave */
171 |         border-radius: 1px !important;
172 |     }
173 |     .modal-transition .modal-dialog, .modal-transition .modal-backdrop {
174 |         transition: all .5s ease;
175 |     }
176 |     .modal-enter .modal-dialog, .modal-leave .modal-dialog {
177 |         opacity: 0;
178 |         transform: translateY(-30%);
179 |     }
180 |     .modal-enter .modal-backdrop, .modal-leave .modal-backdrop {
181 |         opacity: 0;
182 |     }
183 | </style>
184 | 


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