Skip to content

Commit c6441ea

Browse files
huang303513huang303513
committed
模态组件的添加和使用
1 parent ababecc commit c6441ea

File tree

6 files changed

+248
-38
lines changed

6 files changed

+248
-38
lines changed

‎vuejs练习/树状视图/index.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
body {
2+
font-family: Menlo, Consolas, monospace;
3+
color: #444;
4+
}
5+
.item {
6+
cursor: pointer;
7+
}
8+
.bold {
9+
font-weight: bold;
10+
}
11+
ul {
12+
padding-left: 1em;
13+
line-height: 1.5em;
14+
list-style-type: dot;
15+
}

‎vuejs练习/树状视图/index.html

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
1-
var data = {
2-
name: 'My Tree',
3-
children: [
4-
{ name: 'hello' },
5-
{ name: 'wat' },
6-
{
7-
name: 'child folder',
8-
children: [
9-
{
10-
name: 'child folder',
11-
children: [
12-
{ name: 'hello' },
13-
{ name: 'wat' }
14-
]
15-
},
16-
{ name: 'hello' },
17-
{ name: 'wat' },
18-
{
19-
name: 'child folder',
20-
children: [
21-
{ name: 'hello' },
22-
{ name: 'wat' }
23-
]
24-
}
25-
]
26-
}
27-
]
28-
}
29-
30-
Vue.component('item',{
31-
template:'#item-template',
32-
props:{
33-
model:Object
34-
},
35-
data:function() {
36-
37-
}
38-
})
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>vuejs练习</title>
6+
<link rel="stylesheet" type="text/css" href="index.css">
7+
<script type="text/x-template" id="item-template">
8+
<li>
9+
<div
10+
:class="{bold: isFolder}"
11+
@click="toggle"
12+
@dblclick="changeType">
13+
{{model.name}}
14+
<span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
15+
</div>
16+
<ul v-show="open" v-if="isFolder">
17+
<item
18+
class="item"
19+
v-for="model in model.children"
20+
:model="model">
21+
</item>
22+
<li @click="addChild">+</li>
23+
</ul>
24+
</li>
25+
</script>
26+
</head>
27+
<body>
28+
<p>(You can double click on an item to turn it into a folder.)</p>
29+
<ul id="demo">
30+
<item
31+
class="item"
32+
:model="treeData">
33+
</item>
34+
</ul>
35+
<script src='../vue.min.js'></script>
36+
<script src="index.js"></script>
37+
</body>
38+
</html>

‎vuejs练习/树状视图/index.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
var data = {
2+
name: 'My Tree',
3+
children: [
4+
{name: 'hello'},
5+
{name: 'wat'},
6+
{
7+
name: 'child folder',
8+
children: [
9+
{
10+
name: 'child folder',
11+
children: [
12+
{name: 'hello'},
13+
{name: 'wat'}
14+
]
15+
},
16+
{name: 'hello'},
17+
{name: 'wat'},
18+
{
19+
name: 'child folder',
20+
children: [
21+
{name: 'hello'},
22+
{name: 'wat'}
23+
]
24+
}
25+
]
26+
}
27+
]
28+
}
29+
30+
Vue.component('item', {
31+
template: '#item-template',
32+
props: {
33+
model: Object
34+
},
35+
data: function () {
36+
return {
37+
open:false
38+
}
39+
},
40+
computed:{
41+
isFolder:function () {
42+
return this.model.children && this.model.children.length;
43+
}
44+
},
45+
methods:{
46+
toggle:function () {
47+
if(this.isFolder){
48+
this.open = !this.open;
49+
}
50+
},
51+
changeType:function () {
52+
if(!this.isFolder){
53+
Vue.set(this.model,'children',[]);
54+
this.addChild();
55+
this.open = true;
56+
}
57+
},
58+
addChild:function () {
59+
this.model.children.push({name:'new stuff'});
60+
}
61+
}
62+
})
63+
64+
var demo = new Vue({
65+
el:"#demo",
66+
data:{
67+
treeData:data
68+
}
69+
})

‎vuejs练习/模态组件/index.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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,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 h3 {
35+
margin-top: 0;
36+
color: #b26b0e;
37+
}
38+
39+
.modal-body {
40+
margin: 40px 0;
41+
}
42+
43+
.modal-default-button {
44+
float: right;
45+
}
46+
47+
.modal-enter,
48+
.modal-leave {
49+
opacity: 0;
50+
}
51+
52+
.modal-enter .modal-container,
53+
.modal-leave .modal-container {
54+
-webkit-transform: scale(1.5);
55+
transform: scale(1.5);
56+
}
57+

‎vuejs练习/模态组件/index.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>vuejs练习</title>
6+
<link rel="stylesheet" type="text/css" href="index.css">
7+
<script type="x/template" id="modal-template">
8+
<div class="modal-mask" v-show="show" transition="modal">
9+
<div class="modal-wrapper">
10+
<div class="modal-container">
11+
<div class="modal-header">
12+
<slot name="header">
13+
default header
14+
</slot>
15+
</div>
16+
17+
<div class="modal-body">
18+
<slot name="body">
19+
default body
20+
</slot>
21+
</div>
22+
23+
<div class="modal-footer">
24+
<slot name="footer">
25+
default footer
26+
<button class="modal-default-button" @click="show = false">
27+
OK
28+
</button>
29+
</slot>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
</script>
35+
</head>
36+
<body>
37+
<div id="app">
38+
<button id="show-modal" @click="showModal = true">Show Modal</button>
39+
<modal :show.sync="showModal">
40+
<h3 slot="header">custom header</h3>
41+
<!--<h3 slot="body">custom test</h3>-->
42+
</modal>
43+
</div>
44+
<script src='../vue.min.js'></script>
45+
<script src="index.js"></script>
46+
</body>
47+
</html>

‎vuejs练习/模态组件/index.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* Created by huangchengdu on 16/10/19.
3+
*/
4+
5+
6+
Vue.component('modal',{
7+
template:'#modal-template',
8+
props:{
9+
show:{
10+
type:Boolean,
11+
required:true,
12+
twoWay:true
13+
}
14+
}
15+
})
16+
17+
new Vue({
18+
el:'#app',
19+
data:{
20+
showModal:false
21+
}
22+
})

0 commit comments

Comments
 (0)