vue之全局组建封装

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

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

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

组建的作用

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

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

.vue 代码片段

新建一个 alert 文件夹在文件夹下面新建 alert.vue

<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

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;”将组建继承。

使用

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

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

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

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