vue之全局组建封装

发表于 |

很久没更新内容了，最主要是人懒，(꒦_꒦) ！

今天开始总结这一年在工作中的点滴积累，已供以后查阅！

VUE 已经用了 1 年了，各个知识点的领域或多或少都有涉及，今天记录一下全局组建的实现和思路

组建的作用

个人总结的一句话： 可重复使用并抽象事件功能的代码块

web 开发当然就离不开三大块 HTML , JS , CSS 下面就从三块开始入手，用嘴简单的 alert 组建作为介绍。

.vue 代码片段

新建一个 alert 文件夹在文件夹下面新建 alert.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
132
133
134
135
136
137
138
139
140
141
142
<template>
    <transition name="fade">
        <div v-if="isShow">
            <!-- 蒙层背景 -->
            <div class="dg-backdrop"></div>
            <!-- 弹窗主体 -->
            <div class="dg-container">
                <div class="dg-content-cont">
                    <!-- 弹窗标题可输入代码片段 eg：<span style='color:red'>标题</span> -->
                    <div class="alert">
                        <p class="des" v-html="title"></p>
                    </div>
                    <!-- 弹窗内容可输入代码片段 -->
                    <p class="tips" v-html="tips"></p>
                    <!-- 确认取消按钮 -->
                    <div class="btn-box">
                        <!-- 当取消按钮设置为空的时候隐藏 -->
                        <div v-if="noTxt!==''" class="btn btn-no" @click.prevent="hideAlert">{{noTxt}}</div>
                        <!-- 当天确定按钮设置为空的时候隐藏 -->
                        <div v-if="yesTxt!==''" class="btn" @click.prevent="handleYes(yesCallback)">{{yesTxt}}</div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
    name: 'alert',
    data() {
        return {
            isShow: false, // 控制弹窗的显示和隐藏
            yesCallback: null, //点击确认按钮的回调
            title: '提示', //弹窗标题
            tips: '你的提示语', // 自定义的提示语
            noTxt: '取消', // 取消按钮默认名称
            yesTxt: '确定' //确认按钮默认名称
        };
    },
    methods: {
        hideAlert() {
            this.isShow = false;
        },
        handleYes(fn) {
            // 确认回调
            if (fn) {
                fn();
            }else{
                this.isShow = false;
            }
        },
        show(o) {
            // 弹窗呈现
            this.isShow = !this.isShow;
            this.yesCallback = o.yesCallback;
            this.title = o.title;
            this.tips = o.tips;
            this.noTxt = o.noTxt;
            this.yesTxt = o.yesTxt;
        }
    },
    created() {}
};
</script>
<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
    opacity: 0;
}

.dg-container {
    position: fixed;
    top: 50%;
    left: 50%;
    .dg-content-cont {
        position: absolute;
        width: 650px;
        height: 300px;
        background-image: linear-gradient(
            135deg,
            #b89962 141.4213562373095px,
            #8c6e30 282.842712474619px
        ); /*no*/
        border-radius: 20px;
        top: 50%;
        left: 50%;
        margin-left: -325px;
        margin-top: -150px;
        border: 2px solid #f7e2a9;
        .alert {
            text-align: center;
            color: #3c2c0a;
            .des {
                line-height: 80px;
                font-size: 22px; /*no*/
                margin-top: 30px;
                color: #3c2c0a;
                font-weight: bold;
            }
        }
        .tips {
            color: #3c2c0a;
            margin-top: 10px;
            text-align: center;
            padding: 0 60px;
            min-height: 40px;
        }
        .btn-box {
            display: flex;
            justify-content: center;
            margin: 20px 0 30px 0;
            .btn {
                min-width: 168px;
                height: 64px;
                background: #fcd175;
                background-size: cover;
                color: #000;
                text-align: center;
                line-height: 64px;
                border-radius: 10px;
                padding: 0 10px;
            }
            .btn-no {
                margin-right: 50px;
                background: #dfc286;
            }
        }
    }
}
.dg-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
}
</style>

vue 文件有分为三块，熟悉 vue 的同学都能明白,上面的代码不用多做解释请看注释.

布局采用 rem,flex! 具体方案“lib-flexible” 、“px2rem-loader”

JavaScript

在 alert 文件夹下面新建 index.js

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
import Alert from './alert.vue';
export default {
    install(Vue) {
        // 创建"子类"方便挂载
        const Alerts = Vue.extend(Alert);
        let alert = null;
        /**
         * 初始化并显示alert
         * @returns {Promise} Promise实例
         */
        function $alert(option) {
            return new Promise(resolve => {
                // 第一次调用
                if (!alert) {
                    alert = new Alerts();
                    // 手动创建一个未挂载的实例
                    alert.$mount();
                    // 挂载
                    document.querySelector('body').appendChild(alert.$el);
                }
                // 显示alert
                alert.show(option);
                resolve();
            });
        }
        $alert.hide = () => {
            return new Promise(resolve => {
                alert.hideAlert();
                resolve();
            });
        };
        Vue.prototype.$alert = $alert;
    }
};

上面代码主要的功能是导入.vue 组建功能代码，并使用 vue 组建注册方法“install”全局注册。
然后通过“Vue.prototype.$alert = $alert;”将组建继承。

使用

在 vue 入口文件 main.js 中添加如下代码

1
2
import Alert from './alert';
Vue.use(Alert);

然后就可以在我们的.vue 组建中使用了。

1
2
3
4
5
6
7
8
9
10
this.$alert({
    yesCallback: () => {
        this.$alert.hide();
        // todo
    },
    title: '提示',
    tips: '我是一个自定义意思',
    noTxt: '', // 空 隐藏取消按钮
    yesTxt: '确定'
});