jq、vue、react封装modal弹窗和loading加载模块

前言

在项目中弹窗和加载模块必不可少，如果是大型项目首先会考虑使用哪些适用于自身的ui框架。但我们需要做一些自定义ui较多且项目小型时就需要自己封装modal弹窗和加载模块了，构建项目时，这也是开发最平常需要的共用模块封装。这里放上自己在项目开发中学习使用封装的jquery，vue项目弹窗和加载模块封装函数，让有需要的人可以快速直接使用学习。

使用jquery的传统开发项目

modal

• js

function modal(param) {
    if($('#sysModal').length <= 0) {
        $('body').append('
');
    }
    var timeStamp = new Date().getTime();
    var title = param.title || '我是标题',
                content = param.content || ‘我是内容’,
                yesText = param.yesText || '确定',
                noText = param.noText,
                yesFn = param.yesFn,
                noFn = param.noFn;
    var html =  '
'
                    + '
'
                    + '
';
    if (title) html += '
' + title + '
';
                html += '
' + content + '
';
                html += '
'
    if(noText) {
    html += '';
    }
    html += '';
    html += '
';
               
    var modal = $(html).appendTo('#sysModal');
    modal.on("click", '.modal-btn-cancel', function () {
        noFn && $.isFunction(noFn) && noFn();
        $(modal).remove();
    });
    modal.on("click", '.modal-btn-confirm', function () {
        yesFn && $.isFunction(yesFn) && yesFn();
        $(modal).remove();
    });
}

• css

.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    display: table;
    transition: opacity .3s ease;
    overflow: hidden
}

.modal-mask .modal-wraper {
    vertical-align: middle;
    display: table-cell
}

.modal-mask .modal-wraper .modal-container {
    margin: 0 35%;
    background-color: #fff;
    border-radius: .05rem;
    box-shadow: 0 .02rem .08rem rgba(0,0,0,.33);
    transition: all .3s ease;
    font-family: Arial,Microsoft YaHei
}

.modal-mask .modal-wraper .modal-container .modal-header {
    line-height: .56rem;
    font-size: .18rem;
    padding-top: .23rem;
    text-align: center;
    font-weight: bolder;
    color: #1e1e1e
}

.modal-mask .modal-wraper .modal-container .modal-body {
    padding: .12rem .8rem .3rem .8rem;
    font-size: .18rem;
    line-height: .4rem;
    text-align: center
}

.modal-mask .modal-wraper .modal-container .modal-btn {
    border-top: .01rem solid #e7e7e7;
    display: flex;
    width: 100%
}

.modal-mask .modal-wraper .modal-container .modal-btn .modal-btn-cancel,.modal-mask .modal-wraper .modal-container .modal-btn .modal-btn-confirm {
    flex: 1;
    line-height: 2;
    font-size: .18rem;
    border: none;
    background: none
}

.modal-mask .modal-wraper .modal-container .modal-btn .modal-btn-cancel {
    color: #dadada;
    border-right: .01rem solid #e7e7e7;
    border-radius: initial
}

.modal-mask .modal-wraper .modal-container .modal-btn .modal-btn-confirm {
    color: #00549b
}

@media screen and(max-width:1080px) {
    .modal-mask .modal-wraper .modal-container {
        margin: 0 20%;
    }
    .modal-mask .modal-wraper .modal-container .modal-body {
        padding: .2rem;
        font-size: .36rem;
        ine-height: 1.5;
    }
    .modal-mask .modal-wraper .modal-container .modal-btn .modal-btn-cancel,
    .modal-mask .modal-wraper .modal-container .modal-btn .modal-btn-confirm {
        font-size: .36rem;
    }
    .modal-mask .modal-wraper .modal-container .modal-header {
        font-size: .36rem;
        line-height: 1.5;
    }
}

loading

• js

var loading = {
    show: function(txt) {
        if($('#sysLoading').length <= 0) {
        var html = '
'
                    + '
'
                    + '
'
                    + ''
                    + '
'
                    + '
'
        $('body').append(html);
        }
        txt = txt || '加载中...';
        $('#sysLoading').find('.loading-txt').text(txt);
        $('#sysLoading').show();
    },
    hide:function() {
        $('#sysLoading').hide();
    }
}

• css

.loading-mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
}


.loading-body {
    position: relative;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;
}
.loading-txt {
    vertical-align: middle;
    display: inline-block;
    color: #fff;
    font-size: 0.15rem;
}
.loading-three-bounce {
    position: relative;
    text-align: center;
}
.loading-three-bounce>div {
    display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 100%;
    background: #fff;
    animation: bouncedelay 1.4s infinite ease-in-out;
    animation-fill-mode: both;
}
.loading-three-bounce>div:not(:last-child) {
    margin-right: 0.05rem;
}
@keyframes bouncedelay{
    0%,100%,80% {transform:scale(0);-webkit-transform:scale(0)}
    40% {transform:scale(1);-webkit-transform:scale(1)}
}
.loading-three-bounce .one {
    animation-delay: -.32s;
}
.loading-three-bounce .two {
    animation-delay: -.16s;
}

vue项目

modal

• component

• js

import Loading from '../components/Loading.vue';

let LoadingC = Vue.extend(Loading);
let instance;
export const Load = {
  open(options = {}) {
    if (!instance) {
      this.initInstance(options);
    }
    instance.visible = true;
  },
  initInstance(options) {
    instance = new LoadingC({
      el: document.createElement('div')
    });
    instance.text = options.text || '加载中';
    for (var prop in options) {
      if (options.hasOwnProperty(prop)) {
        instance[prop] = options[prop];
      }
    }
    document.body.appendChild(instance.$el);
    Vue.nextTick(() => {
      instance.visible = true;
    });
  },
  close() {
    instance.visible = false;
  }
};

扩展

react与vue封装类似，这里不再贴出代码了，可自行借鉴动手实现一下。
提示：一个文件作为component,一个js文件作为调用封装。
不知道有没有大神愿意分享更易用的封装函数，这些也只是我自己个人技术有限的分享。

总结

2020的疫情影响太大，作为一名蠢蠢欲动的小前端跳槽失败只能选择观望。如果有前端开发职位可以联系我了解一下，看我能不能成为幸运的一位网民。当然志同道合的朋友也可以联系我，技术交流沟通我求之不得。
最后，希望每个人都能成就自己的一番事业。当自己在中年时不是平庸，不是叹息现实暗自无奈，无所适从。