Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 4cc58b4

Browse filesBrowse files
yyx990803yyx990803
committed
add modal component example
1 parent 68ca564 commit 4cc58b4
Copy full SHA for 4cc58b4

File tree

Expand file treeCollapse file tree

2 files changed

+137
-0
lines changed
Filter options
Expand file treeCollapse file tree

2 files changed

+137
-0
lines changed

‎examples/modal/index.html

Copy file name to clipboard
+78Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue.js Modal Example</title>
6+
<script src="../../dist/vue.js"></script>
7+
<link rel="stylesheet" href="modal.css">
8+
</head>
9+
<body>
10+
<!-- template for the modal component -->
11+
<template id="modal-template">
12+
<div class="modal-mask" v-show="show" v-transition="modal">
13+
<div class="modal-wrapper">
14+
<div class="modal-container">
15+
<content select=".modal-header">
16+
<div class="modal-header">
17+
default header
18+
</div>
19+
</content>
20+
<content select=".modal-body">
21+
<div class="modal-body">
22+
default body
23+
</div>
24+
</content>
25+
<content select=".modal-footer">
26+
<div class="modal-footer">
27+
default footer
28+
<button class="modal-default-button"
29+
v-on="click: show = false">
30+
OK
31+
</button>
32+
</div>
33+
</content>
34+
</div>
35+
</div>
36+
</div>
37+
</template>
38+
39+
<script>
40+
// register modal component
41+
Vue.component('modal', {
42+
template: '#modal-template',
43+
props: {
44+
show: {
45+
type: Boolean,
46+
required: true,
47+
twoWay: true
48+
}
49+
}
50+
})
51+
</script>
52+
53+
<!-- app -->
54+
<div id="app">
55+
<button v-on="click: showModal = true">Show Modal</button>
56+
<!-- use the modal component, pass in the prop -->
57+
<modal show="{{@showModal}}">
58+
<!--
59+
you can use custom content here to overwrite
60+
default content
61+
-->
62+
<div class="modal-header">
63+
<h3>custom header</h3>
64+
</div>
65+
</modal>
66+
</div>
67+
68+
<script>
69+
// start app
70+
new Vue({
71+
el: '#app',
72+
data: {
73+
showModal: false
74+
}
75+
})
76+
</script>
77+
</body>
78+
</html>

‎examples/modal/modal.css

Copy file name to clipboard
+59Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.modal-mask {
2+
position: fixed;
3+
z-index: 9998;
4+
top: 0;
5+
left: 0;
6+
width: 100%;
7+
height: 100%;
8+
background-color: rgba(0, 0, 0, .5);
9+
display: table;
10+
transition: opacity .3s ease;
11+
}
12+
13+
.modal-wrapper {
14+
display: table-cell;
15+
vertical-align: middle;
16+
}
17+
18+
.modal-container {
19+
width: 300px;
20+
margin: 0px auto;
21+
padding: 20px 30px;
22+
background-color: #fff;
23+
border-radius: 2px;
24+
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
25+
transition: all .3s ease;
26+
font-family: Helvetica, Arial, sans-serif;
27+
}
28+
29+
.modal-header h3 {
30+
margin-top: 0;
31+
color: #42b983;
32+
}
33+
34+
.modal-body {
35+
margin: 20px 0;
36+
}
37+
38+
.modal-default-button {
39+
float: right;
40+
}
41+
42+
/*
43+
* the following styles are auto-applied to elements with
44+
* v-transition="modal" when their visiblity is toggled
45+
* by Vue.js.
46+
*
47+
* You can easily play with the modal transition by editing
48+
* these styles.
49+
*/
50+
51+
.modal-enter, .modal-leave {
52+
opacity: 0;
53+
}
54+
55+
.modal-enter .modal-container,
56+
.modal-leave .modal-container {
57+
-webkit-transform: scale(1.1);
58+
transform: scale(1.1);
59+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.