项目中的封装函数

蛋黄派i

已于 2023-08-06 13:37:49 修改

阅读量98

点赞数 2

文章标签：前端 javascript 开发语言

于 2023-08-06 13:34:08 首次发布

本文链接：https://blog.csdn.net/2201_75702085/article/details/132130009

版权

一.去除空格

function isnull(val) {
 
    const str = val.replace(/(^\s*)|(\s*$)/g, '');
  
    if (str == '' || str == undefined || str == null) {
        return true;
    } else {
        return false;
    }
}

二.判断图片类型

function  ispicture(file){
    let type=file.type;
    if(type==='image/git'||type==='image/jpeg'||type==='image/jpg'||type==='image/png'||type==='image/webp'){
        return true;
    }else{
        return false;
    }
}

三.正则表达式

let emailreg=/^([a-z0-9A-Z]+[-|\.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-zA-Z]{2,}$/;
let psreg=/^(?=.*\d)(?=.*[A-z])[\da-zA-Z]{6,12}$/;
let agereg=/^(([0-9]|[1-9][1-9]|1[0-1][0-9])(\\.[0-9]+)?|119)$/;
let hightreg=/^([1-9][0-9]{0,3}(\.\d{1,3})?|5)$/;

四.封装confirm

function confirm(msg){
    let Confirmcnt = document.createElement('div');
    Confirmcnt.innerHTML = `
    <div class="mask-color"></div>
    <div id='mask'>
        <div id="mask-top"><span>提示</span></div>
        <div id="mask-main">${msg}</div>
        <button style="background-color: #f0f9eb; color: #67c23a;">确认</button><button style="background-color: #fff; border: #d7d9d6 1px solid;">取消</button>
    </div>
      `;
    document.body.appendChild(Confirmcnt);
    let conPromise= new Promise((resolve,reject) => {
        let button=Confirmcnt.getElementsByTagName('button');
        button[0].addEventListener('click', function () {
            document.body.removeChild(Confirmcnt);
            resolve()
        })
        button[1].addEventListener('click', function () {
            document.body.removeChild(Confirmcnt);
            reject()
        })
    })
    return conPromise;
}

css

#mask {
    position: fixed;
    background-color: #fff;
    width: 300px;
    height: 150px;
    top: 50%;
    left: 52%;
    display: block;
    margin-left: -200px;
    margin-top: -125px;
    border-radius: 4px;
    z-index: 9999;
}
.mask-color{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    opacity: 0.6;
    background-color: #dbd9d9;
    z-index: 998;
}
#mask button {
    width: 50px;
    margin-left: 65px;
    height: 30px;
    margin-top: 5.5px;
    border: none;
    color: #000;
    border-radius: 3px;
}

#mask-top {
    border-radius: 4px 4px 0 0;
    height: 30px;
    font-size: 15px;
    line-height: 30px;
    padding-left: 20px;
    background-color: #f0f9eb;
    color: #67c23a;
}

#mask-main {
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 15px;
    border-bottom: 1px solid #ebeef5;
}

使用方法:

function delcourse(event) {
    let id = event.parentNode.parentNode.id;
    confirm("真的要删除吗?")
        .then(() => {
            axios.delete(`${head}class/delclass?id=${id}`, {
                headers: {
                    'token': token
                }
            })
                .then(r => {
                    content.innerHTML = ``;
                    getclasspage();
                })
        })
        .catch(()=>{
            console.log("取消删除");
    })
}

五.封装alert

function alertSuccess(msg){
    let alertBox= document.createElement('div');
    alertBox.className='alert alert-success';
    alertBox.innerHTML=`<svg t="1690011096577" class="alert-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2337" width="200" height="200"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" fill="#67c23a" p-id="2338"></path></svg>
    <p>${msg}</p>`;
    document.body.appendChild(alertBox);
    setTimeout(() => {
        document.getElementsByClassName('alert')[0].style.opacity=0;
        setTimeout(()=>{
            document.body.removeChild(alertBox);
        },2000)
    }, 1000);
}

function alerterror(msg){
    let alertBox= document.createElement('div');
    alertBox.className='alert alert-error';
    alertBox.innerHTML=`
    <svg t="1690015321493" class="alert-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2306" width="200" height="200"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m238.4 641.6l-45.6 45.6L512 557.6 318.4 750.4l-45.6-45.6L467.2 512 273.6 318.4l45.6-45.6L512 467.2l193.6-193.6 45.6 45.6L557.6 512l192.8 193.6z" p-id="2307" fill="#f56c6c"></path></svg>
    <p>${msg}</p>`;
    document.body.appendChild(alertBox);
    setTimeout(() => {
        document.getElementsByClassName('alert')[0].style.opacity=0;
        setTimeout(()=>{
            document.body.removeChild(alertBox);
        },2000)
    }, 1000);
}

css

.alert-error {
    background-color: #fef0f0;
    border-color: #fde2e2;
  }
  .alert-error p {
    color: #f56c6c;
  }
  
  .alert-success {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
  }
  .alert-success p {
    color: #67c23a;
  }
  
  
  .alert {
    display: flex;
    min-width: 380px;
    position: absolute;
    border-radius: 4px;
    padding: 15px 15px 15px 20px;
    border: 1px solid #ebeef5;
    left: 40%;
    top:30px;
    opacity: 1;
    transition:opacity 2s;
    z-index: 9999;
  }
  .alert p {
    line-height: 1;
    font-size: 14px;
  }
  .alert .alert-icon {
    width: 14px;
    height: 14px;
    margin-right: 10px;
  }