01.<!DOCTYPE html>
02.<html>
03. <head>
04. <title>Modal Component</title>
06. <link rel="stylesheet" type="text/css" href="/style.css" />
07. <!-- template for the modal component -->
08. <script type="text/x-template" id="modal-template">
09. <transition name="modal">
10. <div class="modal-mask">
11. <div class="modal-wrapper">
12. <div class="modal-container">
13.
14. <div class="modal-header">
15. <slot name="header">
16. default header
17. </slot>
18. </div>
19.
20. <div class="modal-body">
21. <slot name="body">
22. default body
23. </slot>
24. </div>
25.
26. <div class="modal-footer">
27. <slot name="footer">
28. default footer
29. <button class="modal-default-button" @click="$emit('close')">
30. OK
31. </button>
32. </slot>
33. </div>
34. </div>
35. </div>
36. </div>
37. </transition>
38. </script>
39. </head>
40. <body>
41. <!-- app -->
42. <div id="app">
43. <button id="show-modal" @click="showModal = true">Show Modal</button>
44. <!-- use the modal component, pass in the prop -->
45. <modal v-if="showModal" @close="showModal = false">
46. <!--
47. you can use custom content here to overwrite
48. default content
49. -->
50. <h3 slot="header">custom header</h3>
51. </modal>
52. </div>
53.
54. <script>
55.
56. Vue.component("modal", {
57. template: "#modal-template"
58. });
59.
60.
61. new Vue({
62. el: "#app",
63. data: {
64. showModal: false
65. }
66. });
67. </script>
68. </body>
69.</html>
