vue/examples/classic/modal/index.html at main · vuejs/vue · GitHub

Name: vue/examples/classic/modal/index.html at main · vuejs/vue · GitHub
Rating: 4.6 (580 reviews)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>Vue.js modal component example</title>
<!-- Delete ".min" for console warnings in development -->
<scriptsrc="../../../dist/vue.min.js"></script>
<linkrel="stylesheet" href="style.css">
</head>
<body>
<!-- template for the modal component -->
<scripttype="text/x-template" id="modal-template">
<transitionname="modal"appear>
<divclass="modal-mask">
<divclass="modal-wrapper">
<divclass="modal-container">

<divclass="modal-header">
<slotname="header">
 default header
</slot>
</div>

<divclass="modal-body">
<slotname="body">
 default body
</slot>
</div>

<divclass="modal-footer">
<slotname="footer">
 default footer
<buttonclass="modal-default-button" @click="$emit('close')">
 OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>

<!-- app -->
<divid="app">
<buttonid="show-modal" @click="showModal = true">Show Modal</button>
<!-- use the modal component, pass in the prop -->
<modalv-if="showModal" @close="showModal = false">
<!--
 you can use custom content here to overwrite
 default content
 -->
<h3slot="header">custom header</h3>
</modal>
</div>

<script>
// register modal component
Vue.component('modal',{
template: '#modal-template'
})

// start app
newVue({
el: '#app',
data: {
showModal: false
}
})
</script>
</body>
</html>