-
Notifications
You must be signed in to change notification settings - Fork 3
/
modal.html
117 lines (105 loc) · 3.91 KB
/
modal.html
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src='vue.min.js'></script>
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/modal.css">
<link rel="stylesheet" href="style/button.css">
<link rel="stylesheet" href="style/doc.css">
<style type="text/css">
body {
padding: 20px;
}
fieldset {
margin-top: 10px;
}
</style>
</head>
<body>
<div id='modal'>
<v-button type='blue' @click="this.show=true">弹出默认层</v-button>
<modal :show.sync="show" width="500" title="这里是默认" :on-ok="ok1">
这里是内容, 默认的弹出框距离顶部100 px
</modal>
<v-button type='red' @click="this.show1=true">弹出失败按钮</v-button>
<modal :show.sync="show1" width="500" top="20" type="failed" :btn-disabled="true" btn-text='禁用按钮' :dismiss=true title="这里是失败" :on-ok="close">
弹出失败按钮,这个弹出框距离顶部20px, 按钮禁用，并且可以点击遮罩层隐藏
</modal>
<v-button @click="this.show2=true">垂直居中的弹出框</v-button>
<modal :show.sync="show2" position="center" width="500" :on-ok="close1" :dismiss=true title="垂直居中" >
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
<div>垂直居中的弹出框</div>
</modal>
<v-button type='ghost' @click="this.show3=true">关闭Footer</v-button>
<modal :show.sync="show3" width="500" :no-footer='true' type="failed" :on-ok="close1" :dismiss=true title="垂直居中" >
<div style="padding-left: 20px;">
<ul>
<li>没有footer</li>
<li>没有footer</li>
<li>没有footer</li>
</ul>
</div>
</modal>
</div>
<fieldset style="margin-top: 10px;padding: 10px 20px 10px 40px; color:green;line-height:1.5">
<legend>Document</legend>
<ul>
<li>
<b>show :</b> 必须，布尔值，且为 .sync 的双向值
</li>
<li>
<b>position :</b> 可选，字符串，当设置为 center 时，垂直居中，默认为距顶部100px
</li>
</ul>
</fieldset>
<script type="text/javascript" src="Js/button.js"></script>
<script src="component/component.all.es6"></script>
<script type="text/javascript">
new Component('modal');
var modal = new Vue({
el: '#modal',
data: {
show: false,
show1: false,
show2: false,
show3: false,
},
methods: {
ok1: function () {
this.show = !1;
this.$nextTick(()=>alert('点击了关闭'))
},
close: function (val) {
this.show = this.show1 = this.show2 = this.show3 = false
}
}
});
</script>
</body>
</html>