vue-封装模态框组件

发表于 | 分类于 | | 阅读次数 
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p,h4{
            margin:0;
        }
        .modal{
            width: 500px;
            background-color: #fff;
            border: 1px solid rgba(0,0,0,.2);
            border-radius: 6px;
            box-shadow: 0 3px 9px rgba(0,0,0,.5);

        }
        .modal-header {
            padding: 15px;
            border-bottom: 1px solid #e5e5e5;
        }
        .modal-content div {
            padding: 20px;
        }
        .modal-footer {
            padding: 15px;
            text-align: right;
            border-top: 1px solid #e5e5e5;
        }
        .btn {
            padding: 5px 15px;
            border: none;
            outline: none;
        }
        .blue {
            color: #fff;
            background-color: #39f;
            border-color: #39f;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
            <m-alert @on-ok="onRect"></m-alert>
            <m-alert modal-title="提醒" @on-cancel="onfale">
                <ul slot="model">
                    <li v-for="item of list">{{item}}</li>
                </ul>
            </m-alert>
            <m-alert>
                <div slot="modal-footer">
                    <span>确定</span>
                    <span>重置</span>
                    <span>返回</span>
                </div>
                    
            </m-alert>
    </div>
    <script>
        /*
            设置的props：
                modalTitle 提醒信息 默认为 '这是一个模态框'

            定制模板：
                slot为modal-content  定制提醒信息模板
                slot为modal-footer   定制底部模板

            监控子组件状态变化：
                事件名on-ok        点击确定触发
                事件名on-cancel   点击取消触发
        */ 

        Vue.component('m-alert',{
            props:{
                modalTitle:{
                    type:String,
                    default:"这是一个模态框"
                }
            },

            template:`
            <div class="modal">
                    <div class="modal-header">
                        <h4>{{modalTitle}}</h4>
                    </div>
                    <div class="modal-content">
                        <slot name="model">
                        <div>
                           在这里添加内容
                        </div>
                        </slot>
                    </div>
                    <div class="modal-footer">
                            <slot name="modal-footer">
                            <input class="btn blue" type="button" value="确定" @click="onHander" />
                            <input class="btn" type="button" value="取消" @click="onCanle" />
                        </slot>
                        
                    </div>
                </div>
            `,
            methods:{
                onHander(){
                    // alert("a")
                    this.$emit("on-ok")
                },
                onCanle(){
                    this.$emit("on-cancel")
                }
            }
        })
        list=[...'大家好吗']
        new Vue({
            el:"#app",
            data:{
                list:list
            },
            methods:{
                onRect(){
                    alert("成功确定")
                },
                onfale(){
                    alert("chen")
                }
            }
        })

    </script>
</body>
</html>